If you are using multiple rows in the table header, it can be useful to have a rowspanning cell on the column(s) you have fixed in place - equally at other - times it can be useful to not and make use of the two or more cells per column. FixedColumns builds on the complex header support in DataTables to make this - trivial to use in FixedColumns. Just initialise your FixedColumns instance as you normally would!
-| Name | -HR Information | -Contact | -|||
|---|---|---|---|---|---|
| Position | -Salary | -Office | -Extn. | -||
| Name | -Position | -Salary | -Office | -Extn. | -|
| Tiger Nixon | -System Architect | -$320,800 | -Edinburgh | -5421 | -t.nixon@datatables.net | -
| Garrett Winters | -Accountant | -$170,750 | -Tokyo | -8422 | -g.winters@datatables.net | -
| Ashton Cox | -Junior Technical Author | -$86,000 | -San Francisco | -1562 | -a.cox@datatables.net | -
| Cedric Kelly | -Senior Javascript Developer | -$433,060 | -Edinburgh | -6224 | -c.kelly@datatables.net | -
| Airi Satou | -Accountant | -$162,700 | -Tokyo | -5407 | -a.satou@datatables.net | -
| Brielle Williamson | -Integration Specialist | -$372,000 | -New York | -4804 | -b.williamson@datatables.net | -
| Herrod Chandler | -Sales Assistant | -$137,500 | -San Francisco | -9608 | -h.chandler@datatables.net | -
| Rhona Davidson | -Integration Specialist | -$327,900 | -Tokyo | -6200 | -r.davidson@datatables.net | -
| Colleen Hurst | -Javascript Developer | -$205,500 | -San Francisco | -2360 | -c.hurst@datatables.net | -
| Sonya Frost | -Software Engineer | -$103,600 | -Edinburgh | -1667 | -s.frost@datatables.net | -
| Jena Gaines | -Office Manager | -$90,560 | -London | -3814 | -j.gaines@datatables.net | -
| Quinn Flynn | -Support Lead | -$342,000 | -Edinburgh | -9497 | -q.flynn@datatables.net | -
| Charde Marshall | -Regional Director | -$470,600 | -San Francisco | -6741 | -c.marshall@datatables.net | -
| Haley Kennedy | -Senior Marketing Designer | -$313,500 | -London | -3597 | -h.kennedy@datatables.net | -
| Tatyana Fitzpatrick | -Regional Director | -$385,750 | -London | -1965 | -t.fitzpatrick@datatables.net | -
| Michael Silva | -Marketing Designer | -$198,500 | -London | -1581 | -m.silva@datatables.net | -
| Paul Byrd | -Chief Financial Officer (CFO) | -$725,000 | -New York | -3059 | -p.byrd@datatables.net | -
| Gloria Little | -Systems Administrator | -$237,500 | -New York | -1721 | -g.little@datatables.net | -
| Bradley Greer | -Software Engineer | -$132,000 | -London | -2558 | -b.greer@datatables.net | -
| Dai Rios | -Personnel Lead | -$217,500 | -Edinburgh | -2290 | -d.rios@datatables.net | -
| Jenette Caldwell | -Development Lead | -$345,000 | -New York | -1937 | -j.caldwell@datatables.net | -
| Yuri Berry | -Chief Marketing Officer (CMO) | -$675,000 | -New York | -6154 | -y.berry@datatables.net | -
| Caesar Vance | -Pre-Sales Support | -$106,450 | -New York | -8330 | -c.vance@datatables.net | -
| Doris Wilder | -Sales Assistant | -$85,600 | -Sidney | -3023 | -d.wilder@datatables.net | -
| Angelica Ramos | -Chief Executive Officer (CEO) | -$1,200,000 | -London | -5797 | -a.ramos@datatables.net | -
| Gavin Joyce | -Developer | -$92,575 | -Edinburgh | -8822 | -g.joyce@datatables.net | -
| Jennifer Chang | -Regional Director | -$357,650 | -Singapore | -9239 | -j.chang@datatables.net | -
| Brenden Wagner | -Software Engineer | -$206,850 | -San Francisco | -1314 | -b.wagner@datatables.net | -
| Fiona Green | -Chief Operating Officer (COO) | -$850,000 | -San Francisco | -2947 | -f.green@datatables.net | -
| Shou Itou | -Regional Marketing | -$163,000 | -Tokyo | -8899 | -s.itou@datatables.net | -
| Michelle House | -Integration Specialist | -$95,400 | -Sidney | -2769 | -m.house@datatables.net | -
| Suki Burks | -Developer | -$114,500 | -London | -6832 | -s.burks@datatables.net | -
| Prescott Bartlett | -Technical Author | -$145,000 | -London | -3606 | -p.bartlett@datatables.net | -
| Gavin Cortez | -Team Leader | -$235,500 | -San Francisco | -2860 | -g.cortez@datatables.net | -
| Martena Mccray | -Post-Sales support | -$324,050 | -Edinburgh | -8240 | -m.mccray@datatables.net | -
| Unity Butler | -Marketing Designer | -$85,675 | -San Francisco | -5384 | -u.butler@datatables.net | -
| Howard Hatfield | -Office Manager | -$164,500 | -San Francisco | -7031 | -h.hatfield@datatables.net | -
| Hope Fuentes | -Secretary | -$109,850 | -San Francisco | -6318 | -h.fuentes@datatables.net | -
| Vivian Harrell | -Financial Controller | -$452,500 | -San Francisco | -9422 | -v.harrell@datatables.net | -
| Timothy Mooney | -Office Manager | -$136,200 | -London | -7580 | -t.mooney@datatables.net | -
| Jackson Bradshaw | -Director | -$645,750 | -New York | -1042 | -j.bradshaw@datatables.net | -
| Olivia Liang | -Support Engineer | -$234,500 | -Singapore | -2120 | -o.liang@datatables.net | -
| Bruno Nash | -Software Engineer | -$163,500 | -London | -6222 | -b.nash@datatables.net | -
| Sakura Yamamoto | -Support Engineer | -$139,575 | -Tokyo | -9383 | -s.yamamoto@datatables.net | -
| Thor Walton | -Developer | -$98,540 | -New York | -8327 | -t.walton@datatables.net | -
| Finn Camacho | -Support Engineer | -$87,500 | -San Francisco | -2927 | -f.camacho@datatables.net | -
| Serge Baldwin | -Data Coordinator | -$138,575 | -Singapore | -8352 | -s.baldwin@datatables.net | -
| Zenaida Frank | -Software Engineer | -$125,250 | -New York | -7439 | -z.frank@datatables.net | -
| Zorita Serrano | -Software Engineer | -$115,000 | -San Francisco | -4389 | -z.serrano@datatables.net | -
| Jennifer Acosta | -Junior Javascript Developer | -$75,650 | -Edinburgh | -3431 | -j.acosta@datatables.net | -
| Cara Stevens | -Sales Assistant | -$145,600 | -New York | -3990 | -c.stevens@datatables.net | -
| Hermione Butler | -Regional Director | -$356,250 | -London | -1016 | -h.butler@datatables.net | -
| Lael Greer | -Systems Administrator | -$103,500 | -London | -6733 | -l.greer@datatables.net | -
| Jonas Alexander | -Developer | -$86,500 | -San Francisco | -8196 | -j.alexander@datatables.net | -
| Shad Decker | -Regional Director | -$183,000 | -Edinburgh | -6373 | -s.decker@datatables.net | -
| Michael Bruce | -Javascript Developer | -$183,000 | -Singapore | -5384 | -m.bruce@datatables.net | -
| Donna Snider | -Customer Support | -$112,000 | -New York | -4226 | -d.snider@datatables.net | -
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
- var table = $('#example').DataTable( {
- scrollY: "300px",
- scrollX: true,
- scrollCollapse: true,
- paging: false
- } );
- new $.fn.dataTable.FixedColumns( table );
-} );
-
- 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:
/* Ensure that the demo table scrolls */
- th, td {
- white-space: nowrap;
- padding-left: 40px !important;
- padding-right: 40px !important;
- }
- 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.
-The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side - processing scripts can be written in any language, using the protocol described in the DataTables - documentation.
-