{"id":12500,"date":"2014-03-25T17:51:28","date_gmt":"2014-03-25T12:21:28","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=12500"},"modified":"2016-08-26T17:50:10","modified_gmt":"2016-08-26T12:20:10","slug":"jquery-datatables-plugin-for-pagination-of-html-tables-2","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/jquery-datatables-plugin-for-pagination-of-html-tables-2\/","title":{"rendered":"jQuery dataTables plugin for pagination of HTML tables"},"content":{"rendered":"

In my project on Angular.js<\/a> I came across a use case where I needed to paginate the HTML tables . DataTable jQuery plugin is a perfect choice in order to accomplish this task.<\/p>\n

Let us take a simple example to illustrate the use of dataTable plugin:<\/p>\n

[js]
\n<html>
\n<head>
\n<style>
\n<link rel="stylesheet" type="text\/css" href="http:\/\/ajax.aspnetcdn.com\/ajax\/jquery.dataTables\/1.9.4\/css\/jquery.dataTables.css">
\n<\/style><\/p>\n

<\/head>
\n<body>
\n <table id="countTable">
\n <thead>
\n <tr><th>Count<\/th><\/tr>
\n <\/thead>
\n <tbody>
\n <tr><td>5<\/td><\/tr>
\n <tr><td>4<\/td><\/tr>
\n <tr><td>3<\/td><\/tr>
\n <tr><td>2<\/td><\/tr>
\n <tr><td>1<\/td><\/tr>
\n <tr><td>10<\/td><\/tr>
\n <tr><td>9<\/td><\/tr>
\n <tr><td>8<\/td><\/tr>
\n <tr><td>7<\/td><\/tr>
\n <tr><td>6<\/td><\/tr>
\n <tr><td>15<\/td><\/tr>
\n <tr><td>14<\/td><\/tr>
\n <tr><td>13<\/td><\/tr>
\n <tr><td>12<\/td><\/tr>
\n <tr><td>11<\/td><\/tr><\/p>\n

<\/tbody>
\n <\/table>
\n <script type="text\/javascript" src="http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.8.2.min.js"><\/script>
\n <script type="text\/javascript" src="http:\/\/ajax.aspnetcdn.com\/ajax\/jquery.dataTables\/1.9.4\/jquery.dataTables.min.js"><\/script>
\n <script>
\n $(function(){
\n $("#countTable").dataTable();<\/p>\n

})
\n <\/script>
\n<\/body>
\n<\/html>
\n[\/js]<\/p>\n

If you are generating HTML Table with the help of some server-side script and you want to paginate that table then all you need to do is $(\u201c#id_of_your_table\u201d) .dataTable().With the help of<\/p>\n

[js]<thead><\/thead> and <tbody><\/tbody>[\/js]<\/p>\n

tags we specify head and body of the table to dataTables plugin .Do not forget to include jQuery and dataTables files in the order as mentioned in the code above .After running the code to your surprise you will notice that the table is sorted in ascending order of the first column. If you don’t want to sort the table then you can do this:<\/p>\n

[js]
\n $("#countTable").dataTable({"bSort": false});
\n[\/js]<\/p>\n

You will also see Show Entries filter , Search box , Information about currently displayed rows and previous \/next pagination . If you want to hide or show one or many of them then you can do it by specifying true\/false for each attribute value . e.g suppose you need to hide Search box and
\nShow Enteries filter then you can do this by following way:<\/p>\n

[js]<\/p>\n

$("#countTable").dataTable({
\n"bPaginate": true,
\n"bInfo": true,
\n"bFilter": false,
\n"bLengthChange": false
\n });
\n[\/js]<\/p>\n

bPaginate : Pagination
\nbInfo : To show the information about the rows currently displayed
\nbLenghtChange : Number of records to display for each pagination
\nbFilter : Search box<\/p>\n

You can set the true\/false values of the attributes according to your need.<\/p>\n

You can also set the default value to show the number of records for each pagination in the following way.<\/p>\n

[js]
\n$("#countTable").dataTable({"iDisplayLength": 5 });
\n[\/js]<\/p>\n","protected":false},"excerpt":{"rendered":"

In my project on Angular.js I came across a use case where I needed to paginate the HTML tables . DataTable jQuery plugin is a perfect choice in order to accomplish this task. Let us take a simple example to illustrate the use of dataTable plugin: [js] <html> <head> <style> <link rel="stylesheet" type="text\/css" href="http:\/\/ajax.aspnetcdn.com\/ajax\/jquery.dataTables\/1.9.4\/css\/jquery.dataTables.css"> <\/style> […]<\/p>\n","protected":false},"author":102,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":32,"footnotes":""},"categories":[7],"tags":[1359,4840,4842,55,27,1124,327],"class_list":["post-12500","post","type-post","status-publish","format-standard","hentry","category-grails","tag-datatables","tag-grails","tag-html","tag-javascript","tag-jquery","tag-node-js","tag-plugin"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t