Data Table Plugin jQuery PHP OpenDataTable - Download Flexible Data Table Plugin With jQuery And PHP - OpenDataTable

Download Flexible Data Table Plugin With jQuery And PHP – OpenDataTable

By Posted on

This time I will share jQuery Plugin and tutorial about Flexible Data Table Plugin With jQuery And PHP – OpenDataTable, hope it will help you in programming stack.

Data Table Plugin jQuery PHP OpenDataTable - Download Flexible Data Table Plugin With jQuery And PHP - OpenDataTable

File Size: 846 KB
Views Total: 8636
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

OpenDataTable is a jQuery plugin used to render flexible, dynamic, sortable, searchable, pagintable, editable data tables from PHP & MySQL data sources.

How to use it:

1. Insert jQuery library together with jQuery OpenDataTable plugin’s JavaScript and stylesheet into the the document.

view source
1 <link rel="stylesheet" href="style.css">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="OpenDataTable.js"></script>

2. Create an empty table element for the OpenDataTable.

view source
01 <table class="OpenDataTable">
02  <thead>
03    <tr>
04       <th>Code</th>
05       <th>Name</th>
06       <th>Continent</th>
07     </tr>
08  </thead>
09   <tbody>
10   </tbody>
11 </table>

3. Initialize the OpenDataTable plugin and specify the data source you want to use.

view source
1 $(".OpenDataTable").OpenDataTable({ 
2   url:"datasource.php"
3 });

4. More configuration options.

view source
01 $(".OpenDataTable").OpenDataTable({ 
02  
03   // data source
04   url:"api.php",
05  
06   // for sortable
07   default_sort:{
08     sort_col:'', // 0 for col 1, 1 for col 2  and on
09     sort_type:'' // 'DESC' or 'ASC'
10   },
11  
12   // hide search input
13   hide_search: false,
14  
15   // hide when no recorders
16   hide_no_of_rec: false,
17  
18   // callback function
19   callback: function() {}
20    
21 });

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

source : jqueryscript.net

Related posts: