Goal
Many of the times we have to give the paging solutions with JQuery. I have created a small generic script that will allow you to apply paging on html table very quickly. Just a few settings and script will manage the paging(Note:- Right now the script will apply one one table on a page).Settings
- Table ID : Apply an ID to the table with prefix "rpt". In our case we have used "rptPagingTable".
- Paging Items : All the rows which are going to be shown on the basis of page. Apply a custom tag to the row(tag="item").
- Next/Previous : The paging box will have a tag(tag="paging"). There are seperate tags assigned to the button Next and Previous. For Previous it is (tag="pre") and for Next it is (tag="next").
Solution
<html> <head> <style type="text/css"> body{font-family:Calibri,Verdana,Arial,Times New Roman;} .datagrid{border: 1px solid #808080;} .datagrid td{border: 1px solid #efefef;border-collapse: none;padding: 5px;} .header{background-color: #808080;color: #fff;text-align: center;font-size: 20px;} .itemtemplate{background-color: #fff;} .alternatingitemtemplate{background-color: #efefdf;} .footer{background-color: #808080;color: #fff;font-size: 15px;} .pager{background-color: #CED3D6;color: #000;font-size: 15px;text-align: center;} .pager a{color: #0877BD;} .pre{float: left;} .next{float: right;} </style> <script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script> <script language="javascript" type="text/javascript"> //CODE WHICH WILL HELP IN PAGING //Variable for paging var _currentPage = 1; var _pageSize = 0; var _totalPages = 1; $(document).ready(function () { //Setting the page size _pageSize = $("table[id*='rpt']").attr("pagesize"); //Total Item var _trItem = $("tr[tag='item']"); var _pager = $("tr[tag='paging']"); //Calculate the page size _totalPages = parseInt($(_trItem).length / _pageSize) + ($(_trItem).length % _pageSize > 0 ? 1 : 0); //Hide the pager if the items are less than 13 if ($(_trItem).length > _pageSize) { $(_pager).show(); } else { $(_pager).hide(); } //Page One Settings Paging(); //Previous $("a[tag='pre']").click(function () { if (_currentPage == 1) { return; } //Reduce the page index _currentPage = _currentPage - 1; //Paging Paging(); }); //Next $("a[tag='next']").click(function () { if (_currentPage == _totalPages) { return; } //Increase the page index _currentPage = _currentPage + 1; //Paging Paging(); }); }); //Shows/Hides the tr function Paging() { //Get the correct start index and end index var _endIndex = (_currentPage * _pageSize); var _startIndex = (_endIndex - _pageSize) + 1; //Hide all first $("tr[tag='item']").hide(); //Show correct items $("tr[tag='item']").each(function (i) { var x = i + 1; if (x >= _startIndex && x <= _endIndex) { $(this).show(); } }); } </script> </head> <body> <table id="rptPagingTable" cellpadding="0" cellspacing="0" border="0" class="datagrid" style="width: 700px" align="center" calculativegrid="PM" pagesize="5"> <tr class="header"><td>No.</td><td style="width: 100%;">Instant Paging</td></tr> <tr tag="item" class='itemtemplate'><td>1</td><td>Ahmedabad</td></tr> <tr tag="item" class='alternatingitemtemplate'><td>2</td><td>Mumbai</td></tr> <tr tag="item" class='itemtemplate'><td>3</td><td>Delhi</td></tr> <tr tag="item" class='alternatingitemtemplate'><td>4</td><td>Calcutta</td></tr> <tr tag="item" class='itemtemplate'><td>5</td><td>Chicago</td></tr> <tr tag="item" class='alternatingitemtemplate'><td>6</td><td>New York</td></tr> <tr tag="item" class='itemtemplate'><td>7</td><td>New Jersy</td></tr> <tr tag="item" class='alternatingitemtemplate'><td>8</td><td>Bangalore</td></tr> <tr tag="item" class='itemtemplate'><td>9</td><td>Hyderabad</td></tr> <tr tag="item" class='alternatingitemtemplate'><td>10</td><td>Noida</td></tr> <tr tag="item" class='itemtemplate'><td>11</td><td>Mangalore</td></tr> <tr tag="item" class='alternatingitemtemplate'><td>12</td><td>Pune</td></tr> <tr tag="paging" class="pager"> <td colspan="6"> <a tag="pre" class="pre" href="javascript:void(0);"><< Prev</a> <a tag="next" class="next" href="javascript:void(0);">Next >></a> </td> </tr> </table> </body> </html>
Display
Please let me know if this was helpful.
