jQuery Plugin For Manipulating Tabulated Data - Zentable
File Size: | 67.6KB |
---|---|
Views Total: | 3071 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.