1. Components
2. UI Elements
3. Table Advanced

Table Advanced

DataTables. Add advanced interaction controls to your HTML tables the easy way. Read the Official DataTable Documentation for a full list of instructions and other options.

---

Basic DataTable

Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.

<table id="example1" class="table">..</table>

$('#example1').DataTable({
  language: {
    searchPlaceholder: 'Search...',
    sSearch: '',
    lengthMenu: '_MENU_ items/page',
  }
});

---

Responsive DataTable

Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.

$('#example2').DataTable({
  responsive: true,
  language: {
    searchPlaceholder: 'Search...',
    sSearch: '',
    lengthMenu: '_MENU_ items/page',
  }
});

---

Data Source (Array)

DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax.

$('#example3').DataTable({
  'ajax': '../assets/data/datatable-arrays.txt',
  language: {
    searchPlaceholder: 'Search...',
    sSearch: '',
    lengthMenu: '_MENU_ items/page',
  }
});

---

Data Source (Objects)

To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects as the data source for each row

$('#example4').DataTable({
  'ajax': '../assets/data/datatable-objects.txt',
  "columns": [
    { "data": "name" },
    { "data": "position" },
    { "data": "office" },
    { "data": "extn" },
    { "data": "salary" }
  ],
  language: {
    searchPlaceholder: 'Search...',
    sSearch: '',
    lengthMenu: '_MENU_ items/page',
  }
});