7,2%
$129,920
Last Month
0,6%
$14,293
Today
0,8%
$190,250
Last Week
3,2%
$10,250
Last Hour
Fast21 80%
Eco Newmars 70%
Best Niket 60%
Real Five 40%

Datatables

Modal editor - altEditor Plugin

Inline editor

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sydney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Name Position Office Age Start date Salary
$(function(){
  var table = $('#inlineEditor').DataTable();
  table.MakeCellsEditable({
    "onUpdate": myCallbackFunction
  });
});
function myCallbackFunction(updatedCell, updatedRow, oldValue) {
  console.log("The new value for the cell is: " + updatedCell.data());
  console.log("The old value for that cell was: " + oldValue);
  console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
  "onUpdate": myCallbackFunction
});

Export Data

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sydney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Name Position Office Age Start date Salary
var table = $('#export_data').DataTable({
  lengthChange: true,
  dom: 'Bfrtip',
  buttons: [ 
  {
    extend: 'copyHtml5',
    className: 'btn-light btn-outline',
    text: 'Copy'
  },
  {
    extend: 'excelHtml5',
    className: 'btn-light btn-outline',
    text: 'Excel'
  },
  {
    extend: 'csvHtml5',
    className: 'btn-light btn-outline',
    text: 'CSV'
  },
  {
    extend: 'pdfHtml5',
    className: 'btn-light btn-outline',
    text: 'PDF'
  },
  {
  text: 'JSON',
  className: 'btn-light btn-outline',
    action: function ( e, dt, button, config ) {
        var data = dt.buttons.exportData();
 
        $.fn.dataTable.fileSave(
            new Blob([JSON.stringify(data)]),
            'Export.json'
        );
    }
}]

// Pagination
$('#export_data_wrapper .dt-buttons').addClass('float-left');
$('#export_data_wrapper .dataTables_paginate').addClass('width-0');

Column and Row Reorder

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
$('#colRowReorderTable').DataTable( {
  responsive: true,
  colReorder: true,
  rowReorder: true,
  "ajax": {
    "url": "../../../assets/plugins/datatables/demo-data/demoData3.txt",
    "dataSrc": "demo"
  }
});

Highlighted rows and columns

Name Position Extn. Start Salary
Name Position Extn. Start Salary
var table = $('#dataTable7').DataTable({
  "responsive": true,
  "bPaginate":  true,
  "bInfo" :     true,
  "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
  "iDisplayLength": 5,
  "ajax": {
            "url": "../../../assets/plugins/datatables/demo-data/demoData3.txt",
            "dataSrc": "demo"
  }
});
$('#dataTable7 tbody')
  .on( 'mouseenter', 'td', function () {
    var colIdx = table.cell(this).index().column;
    $( table.cells().nodes() ).removeClass( 'highlight' );
    $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
});

Responsive - Toggle content

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Author California 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Js Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Assistant California 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Developer California 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Director California 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd CFO New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Engineer Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
First name Last name Position Office Age Start date Salary Extn. E-mail
$('#responsiveTable').DataTable();

Responsive - Modal details display

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon Architect Edinburgh 61 2011/04/25 $320,800 5421 t.nixon@datatables.net
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 8422 g.winters@datatables.net
Ashton Cox Author California 66 2009/01/12 $86,000 1562 a.cox@datatables.net
Cedric Kelly Senior Js Edinburgh 22 2012/03/29 $433,060 6224 c.kelly@datatables.net
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407 a.satou@datatables.net
Brielle Williamson Specialist New York 61 2012/12/02 $372,000 4804 b.williamson@datatables.net
Herrod Chandler Assistant California 59 2012/08/06 $137,500 9608 h.chandler@datatables.net
Rhona Davidson Specialist Tokyo 55 2010/10/14 $327,900 6200 r.davidson@datatables.net
Colleen Hurst Developer California 39 2009/09/15 $205,500 2360 c.hurst@datatables.net
Sonya Frost Engineer Edinburgh 23 2008/12/13 $103,600 1667 s.frost@datatables.net
Jena Gaines Manager London 30 2008/12/19 $90,560 3814 j.gaines@datatables.net
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 9497 q.flynn@datatables.net
Charde Marshall Director California 36 2008/10/16 $470,600 6741 c.marshall@datatables.net
Haley Kennedy Designer London 43 2012/12/18 $313,500 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Director London 19 2010/03/17 $385,750 1965 t.fitzpatrick@datatables.net
Michael Silva Designer London 66 2012/11/27 $198,500 1581 m.silva@datatables.net
Paul Byrd CFO New York 64 2010/06/09 $725,000 3059 p.byrd@datatables.net
Gloria Little Administrator New York 59 2009/04/10 $237,500 1721 g.little@datatables.net
Bradley Greer Engineer London 41 2012/10/13 $132,000 2558 b.greer@datatables.net
Dai Rios Engineer Edinburgh 35 2012/09/26 $217,500 2290 d.rios@datatables.net
First name Last name Position Office Age Start date Salary Extn. E-mail
$('#modalTable').DataTable( {
  responsive: {
    details: {
      display: $.fn.dataTable.Responsive.display.modal( {
        header: function ( row ) {
          var data = row.data();
          return 'Details for '+data[0]+' '+data[1];
        }
      }),
      renderer: function ( api, rowIdx, columns ) {
        var data = $.map( columns, function ( col, i ) {
          return '< tr>'+
                 '< td>'+col.title+':'+'< /td> '+
                 '< td>'+col.data+''+
                 '< /tr>';
          }).join('');
          return $('< table/>').append( data );
      }
    }
  }
});

Responsive - Immediately show hidden details

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sydney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Name Position Office Age Start date Salary
$('#showHiddenTable').DataTable( {
  responsive: {
    details: {
      display: $.fn.dataTable.Responsive.display.childRowImmediate,
      type: ''
    }
  }
});

Custom Tables - Example with Outlined Flat Table

Name Position Extn. Start Salary
Name Position Extn. Start Salary

$('#dataTable6').dataTable({
  "responsive": true,
  "bPaginate":  true,
  "bInfo" :     true,
  "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
  "iDisplayLength": 5,
  "ajax": {
    "url": "../../../assets/plugins/datatables/demo-data/demoData3.txt",
    "dataSrc": "demo"
  }
});