Lightweight jQuery Data Tables with Sorting, Paging, and Filters

This is a simple yet powerful jQuery data table plugin that renders data arrays or remote JSON data (via Ajax) into interactive data tables with support for filtering, paging, and sorting.

It can be useful for admin panels, simple data dashboards, or any situation where you need to sift through rows of data.

More Features

• Modular renderer functions for custom cell and row styling
• Customizable layout regions (header/footer slots for controls)
• Column visibility toggling and page size selection
• Clean default styling with theming support

 How to use it:

1. Add the jQuery data table plugin's files to your HTML page.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Data Table Plugin -->
<link rel="stylesheet" href="dist/jquery.datatable.min.css">
<script src="dist/jquery.datatable.minjs"></script>

2. Create an empty container to hold your data table.

<div id="myDataTable"></div>

3. Prepare your data to be rendered in the data table.

const webDevDataWithId = [
  { id: 1, topic: 'HTML Forms', type: 'Frontend', difficulty: 'Beginner' },
  { id: 2, topic: 'CSS Layout', type: 'Frontend', difficulty: 'Beginner' },
  { id: 3, topic: 'JavaScript Variables', type: 'Frontend', difficulty: 'Beginner' },
  { id: 4, topic: 'Node.js Setup', type: 'Backend', difficulty: 'Beginner' },
  { id: 5, topic: 'REST API Concepts', type: 'Backend', difficulty: 'Intermediate' },
  { id: 6, topic: 'React Components', type: 'Frontend', difficulty: 'Intermediate' },
  { id: 7, topic: 'Git Basics', type: 'DevOps', difficulty: 'Beginner' },
  { id: 8, topic: 'SQL Queries', type: 'Database', difficulty: 'Intermediate' },
  { id: 9, topic: 'Async JavaScript', type: 'Frontend', difficulty: 'Intermediate' },
  { id: 10, topic: 'Express.js Routing', type: 'Backend', difficulty: 'Intermediate' },
  { id: 11, topic: 'CSS Selectors', type: 'Frontend', difficulty: 'Beginner' },
  { id: 12, topic: 'Web Security', type: 'Security', difficulty: 'Beginner' },
  { id: 13, topic: 'Vue.js Fundamentals', type: 'Frontend', difficulty: 'Beginner' },
  { id: 14, topic: 'API Testing', type: 'Testing', difficulty: 'Intermediate' },
  { id: 15, topic: 'Deployment Basics', type: 'DevOps', difficulty: 'Intermediate' },
  { id: 16, topic: 'Local Storage', type: 'Frontend', difficulty: 'Beginner' },
  { id: 17, topic: 'CSS Animations', type: 'Frontend', difficulty: 'Intermediate' },
  { id: 18, topic: 'Authentication', type: 'Backend', difficulty: 'Advanced' },
  { id: 19, topic: 'Redux Intro', type: 'Frontend', difficulty: 'Advanced' },
  { id: 20, topic: 'Database Design', type: 'Database', difficulty: 'Intermediate' }
];

3. Initialize the data table. That's it.

$(function() {
  $('#myDataTable').jqueryDataTable({
    columns: [
      { key: 'id', label: 'ID', visible: false },
      { key: 'topic', label: 'Topic' },
      { key: 'type', label: 'Type' },
      { key: 'difficulty', label: 'Difficulty' }
    ],
    data: webDevDataWithId,
  });
});

4. For larger datasets, you can fetch data via AJAX:

$('#myDataTable').jqueryDataTable({
  columns: [/* column definitions */],
  dataSource: '/api/users',
});

// Your endpoint should return JSON in this format:
{
  "data": [/* row objects */],
  "page": 1,
  "pageSize": 10,
  "total": 123,
  "totalPages": 13
}

5. Available plugin options to config your data tables.

• columns (Array): Defines your table columns. Each object needs a key (matching your data object's property) and a label (for the header). visible: false hides a column.
• data (Array, Optional): A JavaScript array of objects for local data.
• dataSource (String, Optional): URL for fetching remote JSON data.
• pageSize (Number): Default number of rows per page.
• pageSizeOptions (Array): An array of numbers for the page size dropdown, e.g., [10, 25, 50, 100].
• sortColumn (String): The key of the column to sort by initially.
• sortDirection (String): Initial sort direction, either 'asc' or 'desc'.
• layoutTargets (Object): Maps controls like 'pager', 'pageSize', 'info', 'columnSelector', 'resetButton' to layout slots (header.left, header.center, header.right, footer.left, footer.center, footer.right). This is pretty handy for arranging UI elements without extra CSS.
• renderers (Object): An object containing custom functions to render parts of the table.
• onRowClick (Function): A callback function executed when a row is clicked. It receives (rowData, $rowElement) as arguments. I've used this to trigger detail views or edit modals.

$('#myDataTable').jqueryDataTable({
  dataSource: null,
  data: null,
  columns: [],
  sortColumn: '',
  sortDirection: 'asc',
  pageSizeOptions: [10, 20, 50],
  pageSize: 10,
  onRowClick: null,
  layoutTargets: {
    pager: 'footer.right',
    pageSize: 'footer.left',
    info: 'footer.center',
    resetButton: 'header.right',
    columnSelector: 'header.left'
  },
  /* e.g.
  renderers: {
    row: (rowData, mode) => {
      const $tr = $('<tr>');
      if (rowData.isActive === false) { 
        $tr.addClass('inactive-row');
      }
      return $tr;
    },
    cell: (row, col, val, mode) => {
      return $('<td>').addClass(`col-${col.key}`);
    },
    valueCell: (row, col, val) => {
      if (col.key === 'email') {
        return $('<a>').attr('href', `mailto:${val}`).text(val);
      }
      return $('<span>').text(val);
    }
  }
  */
  renderers: {}
});

Changelog:

2025-05-15

• debounce for text filter

---

This awesome jQuery plugin is developed by ddbase3. For more Advanced Usages, please check the demo page or visit the official website.