Categories

DataTables Guide: Interactive & Responsive Tables with JSON, Filters & Export

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

DataTables in Practice: Interactive Tables with JSON and Full Feature Overview

DataTables is a jQuery plugin that transforms plain HTML tables into fully interactive grids. It supports searching, sorting, pagination, responsive design, and can load data dynamically via JSON or AJAX. It’s widely used for dashboards, admin panels, and any application that needs to display structured data efficiently.

Real-World Use Cases

• Employee directories with search and sorting
• Product lists in e-commerce dashboards
• Financial transaction tables with filtering and export
• Project management or task lists
• Public data tables with thousands of rows loaded via JSON

Loading Data from a JSON Object

Instead of fetching JSON via AJAX, you can keep your data directly inside a JavaScript variable and initialize the DataTable from it:

const employeesJson = [
  { "name": "Tiger Nixon", "position": "System Architect", "office": "Edinburgh", "age": 61, "start_date": "2011/04/25", "salary": "$320,800" },
  { "name": "Garrett Winters", "position": "Accountant", "office": "Tokyo", "age": 63, "start_date": "2011/07/25", "salary": "$170,750" }
];

jQuery(document).ready(function($) {
  $('#example').DataTable({
    data: employeesJson,
    columns: [
      { data: 'name', title: 'Name' },
      { data: 'position', title: 'Position' },
      { data: 'office', title: 'Office' },
      { data: 'age', title: 'Age' },
      { data: 'start_date', title: 'Start Date' },
      { data: 'salary', title: 'Salary' }
    ],
    responsive: true,
    pageLength: 10
  });
});

Custom Column Filtering

Filter table rows dynamically by a specific column, for example office location:

jQuery(document).ready(function($) {
  var table = $('#example').DataTable({
    data: employeesJson,
    columns: [
      { data: 'name', title: 'Name' },
      { data: 'position', title: 'Position' },
      { data: 'office', title: 'Office' },
      { data: 'age', title: 'Age' },
      { data: 'start_date', title: 'Start Date' },
      { data: 'salary', title: 'Salary' }
    ]
  });

  $('#officeFilter').on('change', function() {
    table.column(2).search(this.value).draw();
  });
});

HTML filter:

<select id="officeFilter">
  <option value="">All</option>
  <option value="Tokyo">Tokyo</option>
  <option value="Edinburgh">Edinburgh</option>
</select>

DataTables Options Overview with Examples

1. Paging

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  paging: true,
  pageLength: 10,
  lengthMenu: [5, 10, 25, 50]
});

2. Searching

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  searching: true
});

3. Ordering

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  ordering: true,
  order: [[1, 'asc']]
});

4. Responsive

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  responsive: true
});

5. Scrolling

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  scrollY: '50vh',
  scrollX: true
});

6. Column Visibility

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  columnDefs: [
    { targets: [0], visible: false }
  ]
});

7. Export Buttons

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  dom: 'Bfrtip',
  buttons: ['csv', 'excel', 'pdf', 'print']
});

8. Row Selection

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  select: true
});

9. Callbacks

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  initComplete: function() {
    console.log('Table initialized');
  },
  rowCallback: function(row, data) {
    if (data.age > 60) {
      $(row).css('background-color', '#f9f9f9');
    }
  }
});

10. Language Customization

$('#example').DataTable({
  data: employeesJson,
  columns: [...],
  language: {
    search: "Filter records:",
    lengthMenu: "Display _MENU_ rows per page",
    info: "Showing _START_ to _END_ of _TOTAL_ entries"
  }
});

11. Server-Side Processing (Simulated Example)

If you were fetching data from an API, you would normally use serverSide: true
Since in this example we are working with local JSON objects, here’s a simulated version:

$('#example').DataTable({
  processing: true,
  serverSide: true,
  ajax: function(data, callback) {
    // Simulate server-side by returning employeesJson
    callback({ data: employeesJson });
  },
  columns: [
    { data: 'name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'age' }
  ]
});

Example with Buttons and Responsive Table

jQuery(document).ready(function($) {
  $('#example').DataTable({
    data: employeesJson,
    columns: [
      { data: 'name', title: 'Name' },
      { data: 'position', title: 'Position' },
      { data: 'office', title: 'Office' },
      { data: 'age', title: 'Age' },
      { data: 'start_date', title: 'Start Date' },
      { data: 'salary', title: 'Salary' }
    ],
    responsive: true,
    pageLength: 10,
    dom: 'Bfrtip',
    buttons: ['csv', 'excel', 'pdf', 'print']
  });
});

Conclusion

DataTables is a versatile and powerful plugin that turns basic HTML tables into interactive, responsive, and feature-rich grids. With options for dynamic JSON loading, filtering, export, responsive design, and server-side processing, it’s a complete solution for any data-heavy web application. Mastering these options allows you to create professional tables for dashboards, admin panels, and public-facing websites efficiently.

Ovde je sve super, medjutim primeri su napisani u jquery, ali zelim da budu u vanila js. Da li mozes to da uradis ali da nista drugo ne menjas, ni nacin pisanja.