In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and the scrolling accounts for this.
| First name | Last name | Position | Office | Age | Start date | Salary | Extn. | |
|---|---|---|---|---|---|---|---|---|
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120 | 5421 | [email protected] |
| Garrett | Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300 | 8422 | [email protected] |
| Ashton | Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800 | 1562 | [email protected] |
| Cedric | Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600 | 6224 | [email protected] |
| Jenna | Elliott | Financial Controller | Edinburgh | 33 | 2008/11/28 | $5,300 | 5407 | [email protected] |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $4,525 | 4804 | [email protected] |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $4,080 | 9608 | [email protected] |
| Rhona | Davidson | Integration Specialist | Edinburgh | 55 | 2010/10/14 | $6,730 | 6200 | [email protected] |
| Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $5,000 | 2360 | [email protected] |
| Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $3,600 | 1667 | [email protected] |
| Jena | Gaines | System Architect | London | 30 | 2008/12/19 | $5,000 | 3814 | [email protected] |
| Quinn | Flynn | Financial Controller | Edinburgh | 22 | 2013/03/03 | $4,200 | 9497 | [email protected] |
| Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $5,300 | 6741 | [email protected] |
| Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $4,800 | 3597 | [email protected] |
| Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $2,875 | 1965 | [email protected] |
| Michael | Silva | Senior Marketing Designer | London | 66 | 2012/11/27 | $3,750 | 1581 | [email protected] |
| Paul | Byrd | Javascript Developer | New York | 64 | 2010/06/09 | $5,000 | 3059 | [email protected] |
| Gloria | Little | Systems Administrator | New York | 59 | 2009/04/10 | $3,120 | 1721 | [email protected] |
| Bradley | Greer | Software Engineer | London | 41 | 2012/10/13 | $3,120 | 2558 | [email protected] |
| Dai | Rios | System Architect | Edinburgh | 35 | 2012/09/26 | $4,200 | 2290 | [email protected] |
| Jenette | Caldwell | Financial Controller | New York | 30 | 2011/09/03 | $4,965 | 1937 | [email protected] |
| Yuri | Berry | System Architect | New York | 40 | 2009/06/25 | $3,600 | 6154 | [email protected] |
| Caesar | Vance | Technical Author | New York | 21 | 2011/12/12 | $4,965 | 8330 | [email protected] |
| Doris | Wilder | Sales Assistant | Edinburgh | 23 | 2010/09/20 | $4,965 | 3023 | [email protected] |
| Angelica | Ramos | System Architect | London | 36 | 2009/10/09 | $2,875 | 5797 | [email protected] |
| Gavin | Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $4,525 | 8822 | [email protected] |
| Jennifer | Chang | Regional Director | London | 28 | 2010/11/14 | $4,080 | 9239 | [email protected] |
| Brenden | Wagner | Software Engineer | San Francisco | 18 | 2011/06/07 | $3,750 | 1314 | [email protected] |
| Ebony | Grimes | Software Engineer | San Francisco | 48 | 2010/03/11 | $2,875 | 2947 | [email protected] |
| Russell | Chavez | Director | Edinburgh | 20 | 2011/08/14 | $3,600 | 8899 | [email protected] |
| Michelle | House | Integration Specialist | Edinburgh | 37 | 2011/06/02 | $3,750 | 2769 | [email protected] |
| Suki | Burks | Developer | London | 53 | 2009/10/22 | $2,875 | 6832 | [email protected] |
| Prescott | Bartlett | Technical Author | London | 27 | 2011/05/07 | $6,730 | 3606 | [email protected] |
| Gavin | Cortez | Technical Author | San Francisco | 22 | 2008/10/26 | $6,730 | 2860 | [email protected] |
| Martena | Mccray | Integration Specialist | Edinburgh | 46 | 2011/03/09 | $4,080 | 8240 | [email protected] |
| Unity | Butler | Senior Marketing Designer | San Francisco | 47 | 2009/12/09 | $3,750 | 5384 | [email protected] |
| Howard | Hatfield | Financial Controller | San Francisco | 51 | 2008/12/16 | $4,080 | 7031 | [email protected] |
| Hope | Fuentes | Financial Controller | San Francisco | 41 | 2010/02/12 | $4,200 | 6318 | [email protected] |
| Vivian | Harrell | System Architect | San Francisco | 62 | 2009/02/14 | $4,965 | 9422 | [email protected] |
| Timothy | Mooney | Financial Controller | London | 37 | 2008/12/11 | $4,200 | 7580 | [email protected] |
| Jackson | Bradshaw | Director | New York | 65 | 2008/09/26 | $5,000 | 1042 | [email protected] |
| Miriam | Weiss | Support Engineer | Edinburgh | 64 | 2011/02/03 | $4,965 | 2120 | [email protected] |
| Bruno | Nash | Software Engineer | London | 38 | 2011/05/03 | $4,200 | 6222 | [email protected] |
| Odessa | Jackson | Support Engineer | Edinburgh | 37 | 2009/08/19 | $3,600 | 9383 | [email protected] |
| Thor | Walton | Developer | New York | 61 | 2013/08/11 | $3,600 | 8327 | [email protected] |
| Finn | Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $4,800 | 2927 | [email protected] |
| Elton | Baldwin | Data Coordinator | Edinburgh | 64 | 2012/04/09 | $6,730 | 8352 | [email protected] |
| Zenaida | Frank | Software Engineer | New York | 63 | 2010/01/04 | $4,800 | 7439 | [email protected] |
| Zorita | Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $5,300 | 4389 | [email protected] |
| Jennifer | Acosta | Javascript Developer | Edinburgh | 43 | 2013/02/01 | $2,875 | 3431 | [email protected] |
| Cara | Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $4,800 | 3990 | [email protected] |
| Hermione | Butler | Director | London | 47 | 2011/03/21 | $4,080 | 1016 | [email protected] |
| Lael | Greer | Systems Administrator | London | 21 | 2009/02/27 | $3,120 | 6733 | [email protected] |
| Jonas | Alexander | Developer | San Francisco | 30 | 2010/07/14 | $5,300 | 8196 | [email protected] |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $5,300 | 6373 | [email protected] |
| Michael | Bruce | Javascript Developer | Edinburgh | 29 | 2011/06/27 | $4,080 | 5384 | [email protected] |
| Donna | Snider | System Architect | New York | 27 | 2011/01/25 | $3,120 | 4226 | [email protected] |
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"scrollX": true
} );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.