jQuery Plugin For Manipulating Tabulated Data - Zentable

Zentable is a powerful jQuery tabulated data manipulation plugin for creating an editable, sortable, filterable and draggable table that can be used with or without AJAX.

Features:

• Data loaded on demand using AJAX, or embedded in the page.
• Mouse wheel and keyboard can be also used for scrolling.
• Column resizing, auto resizing and table resizing
• Orderable and filtrable by columns.
• Tooltips
• Editable
• Supports HTML as content
• Themeable by CSS. Supports different styles for rows and columns.

How to use it:

1. Include jQuery javascript library and jQuery Zentable plugin on the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.zentable.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/zentable.css">

2. Include required jQuery UI, jQuery mousewheel and jQuery timer on the pate

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> 
<script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script> 

3. Create a container for the Tabulated Data

<div id="table" class="zentable"></div>

4. Call the plugin with options

<script type="text/javascript">
$(document).ready(function() {
$("#table").zentable({
cols: [], // An array containing columns.
data: [], // When this option contains an array of rows, being each row an array of columns, the data shown in the table is got from here.
hideIfEmpty: true, // Hide completely the table if it is empty. It is true by default. 
filters: [], // An array of strings containing the names of the columns that can be filtered.
onclick: function(), // A function that is invoked when a click is done on a cell. 
onedit: function() { alert('edited'); },
order: , // Which field is used for ordering. Only works when table is AJAXed. 
rows: 6, // Maximum number of visible rows (by default 10).
stylesInRows: true, // If true, rows can have class. 
totalsRow: true, // If true, a row for showing totals is added at the end of the table.
});
});
</script>

 

---

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