Getting Started

First, add the javascript to your page. JQuery must be loaded first.

<script type="text/javascript" src="jquery.ztables.min.js"></script>

Don't forget the stylesheet.

<link rel="stylesheet" type="text/css" href="jquery.ztable.min.css"></>

And finally, call this on your table.

$(document).ready(function(){
	ztable = $('#mytable').ZTable();
});

Your table only need include the thead and tbody tags. You can define your column headers within the table or they can be defined along side your table data in JSON format. More on that later.

Options & Settings

ZTables has several options you can define, most of which are turned on by default.

• pagination - (true) Turns on/off pagination
• pageSize - (10) Sets the number of rows per page
• subRows - (false) Turns on/off sub-rows; expanded through mouse click on parent row
• renderSubOnShow - (false) Render the subrow only once it's been expanded
• render - An object containing rendering functions assigned to specific columns
• controls - By default, all controls are turned on and displayed
  • paginate - The pagination buttons
  • pageSize - Page size drop-down
  • filter - Text input for filtering table
  • status - Status shown at bottom of table
  • colVis - Dropdown menu for hiding columns
  • copy - Button to copy the table data to clipboard
• callbacks - Listen for events on the table
  • rowClick - Fired when a row is clicked
  • pageChange - Fired when the page changes

All controls have user accessibility, allowing you to hide the default control and implement your own front-end.