Dynamic Data table using dataTable Query is very simple and useful plugin technique, here we are going to see about that DataTable functions and features. this Dynamic data table has more feature within it, such as Search, Sorting, Pagination, field count, views per page. Those all features contains in the Data table, let see the details about that.[ NEW UPDATED ONE ]
In the Dynamic dataTable we must have to use some Jquery plugins and bootstrap.min.css, because it is well supported with bootstrap files. [ UPDATED NEW ONE ]
SCRIPTS & CSS
<link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.dataTables.js"></script> <script type="text/javascript" src="js/DT_bootstrap.js"></script> <script src="js/dynamic-table.js"></script>
the above all file are important files.
dynamic-table.js
var Script = function () { $('#sample_1').dataTable({ "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_ records per page", "oPaginate": { "sPrevious": "Prev", "sNext": "Next" } }, "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0] }] }); jQuery('#sample_1_wrapper .dataTables_filter input') .addClass("input-medium"); // modify table search input jQuery('#sample_1_wrapper .dataTables_length select') .addClass("input-mini"); // modify table per page dropdown }();
TABLE CODE
table ID is very important. because we have to call the ID in the dynamic-table.js.
<table class="table table-bordered" id="sample_1"> <thead> <tr> <th>S No</th> <th>Title</th> <th>Points</th> <th>Demo</th> <th>Tutorial</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><a href="http://www.2my4edge.com/2013/ 08/resize-font-using-query.html">Resize the font using Query</a></td> <td>1</td> <td class="center "><a href="http://www.2my4edge .com/2013/08/resize-font-using-query.html">Demo </a></td> <td><a href="http://www.2my4edge.com/2013/08/ resize-font-using-query.html"> Tutorial </a></td> </tr> <tr> <td>2</td> <td><a href="http://www.2my4edge.com/2013/07/ export-mysql-database-table-as-csv.html">Export the MySQL database table as CSV format</a></td> <td>10</td> <td class="center "><a href="http://www.2my4edge .com/2013/08/resize-font-using-query.html">Demo </a></td> <td><a href="http://www.2my4edge.com/2013/08/ resize-font-using-query.html"> Tutorial </a></td> </tr> <tr> <td>3</td> <td><a href="http://www.2my4edge.com/2013/07/ simple-pagination-with-loading-effect.html">Simple Pagination with loading effect</a></td> <td>9</td> <td class="center "><a href="http://demos.2my4edge .com/pagination/">Demo </a></td> <td><a href="http://www.2my4edge.com/2013/07/simple- pagination-with-loading-effect.html"> Tutorial </a></td> </tr> <tr> <td>4</td> <td><a href="http://www.2my4edge.com/2013/07/create- custom-file-chosen-input-type.html">custom file chosen input type</a></td> <td>7</td> <td class="center "><a href="http://demos.2my4edge.com/ custom-file/">Demo </a></td> <td><a href="http://www.2my4edge.com/2013/07/create- custom-file-chosen-input-type.html"> Tutorial </a></td> </tr> </tbody> </table>
that is it, the Data table will be works well, check the demo. i hope this is very helpful to you. For more details. refer www.datatables.net
RELATED POSTS:
Most popular posts in 2my4edge
Change text & background color while selecting text using CSS3
Marquee style in different manner with PHP and MySql
My Demos page design details with all my tutorials
Image Zoommer like E-commerce site using multizoom.js
Facebook style Scroll bar using Jquery
Change background image while page refresh using Javascript
Better and Flexible Tooltip using LiteTooltip.js
awwwwssomee
ReplyDeleteNow thanks for saving my life with this amazing discovery, i have just one question. Please where do i change the drop down for the range of records at the top of the page. I would like to reduce the range starting point from 10 to 5.
ReplyDeleteWonderful Job you are doing Bro .........
Hi ,Its working fine for me.
ReplyDeletewhen i add delete button in this each row i am using confirm box before you delete the record it working for first page and other pages not working what is issue
Dear Arun..
ReplyDeleteThanks!! Its working fine with static table.
But its not working when i add data to table dynamically..
I am Trying to add tr dynamically from user inputs. While doing so, table is showing that no records in table. Newly added is getting data below that text.
What can be done to fix this.
Thanks in advance
Will this work with server side processing?
ReplyDeleteHow to sort data from database order by DESC ! default is ASC !
ReplyDeletecan i use this to link from one table to another table to fetch the id and show the details
ReplyDeletehow to show default no of 50 row per page
ReplyDeletehow to show record default 50 row per page
ReplyDeleteHi,
Delete$('#example').datatable({
'pageLength': 50
});
This is to load only 50 rows per page. try this.