Convert HTML Tables Into Interactive Data Tables - jQuery ztables

File Size: 11.9 KB
Views Total: 3208
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Convert HTML Tables Into Interactive Data Tables - jQuery ztables

ztables is a lightweight & feature-rich jQuery plugin that turns your HTML tables (or JSON data) into interactive data tables with advanced features.


  • Show/hide columns.
  • Table filtering.
  • Table sorting.
  • Pagination.
  • Select page size.
  • Swap columns via drag and drop.
  • Export to CSV string.

How to use it:

1. Download and include the ztables plugin's files on the page.

<link rel="stylesheet" href="jquery-ztables.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery-ztables.js"></script>

2. Just call the function ZTable on your HTML table and the plugin will take care of the rest.

<table id="mytable">
      <td>Computer Science</td>
var table = $('#mytable').ZTable();

3. Or load tabular data from JSON via AJAX requests.

  dataType: "json",
  url: "data.json",
  success: function(data){
// data.json
    {"col1":"Linus", "col2":"Torvalds", "col3":"Computer Science"},
    // ...

4. Determine whether to generate pagination links. Default: true.

var table = $('#mytable').ZTable({
    pagination: false,

5. Specify the number of rows per page. Default: 10.

var table = $('#mytable').ZTable({
    pageSize: 20,

6. Determine whether to apply the 'nowrap' attribute to the table cells. Default: true.

var table = $('#mytable').ZTable({
    wrap: false,

7. Enable/disable controls.

var table = $('#mytable').ZTable({
    controls: {
      paginate: true,
      pageSize: true,
      filter: true,
      status: true,
      colVis: true,
      copy: true

8. Define how your data to be rendered in the data table.

var table = $('#mytable').ZTable({
    render: function(value, colIndex, rowIndex, data){
      // ...



  • added 'filterHidden' option
  • added callback

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