锋利的js前端分页之jQuery

2024-04-27 14:12:59

字体：大中小

来源：转载

供稿：网友

锋利的js前端分页之jQuery

大家在作分页时，多数是在后台返回一个导航条的html字符串，其实在前端用js也很好实现。

调用pager方法，输入参数，会返回一个导航条的html字符串。方法的内部比较简单。

 1 /** 2 * pageSize,  每页显示数 3 * pageIndex, 当前页数   4 * pageCount  总页数 5 * url  连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize, pageIndex, pageCount, url) { 9     var intPage = 7;  //数字显示10     var intBeginPage = 0;//开始的页数11     var intEndPage = 0;//结束的页数12     var intCrossPage = parseInt(intPage / 2); //显示的数字13 14     var strPage = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>";15 16     if (pageIndex > 1) {17         strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=1&pageSize=" + pageSize + "'><span>首页</span></a> ";18         strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex - 1) + "&pageSize=" + pageSize + "'><span>上一页</span></a> ";19     }20     if (pageCount > intPage) {//总页数大于在页面显示的页数21 22         if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-323             intBeginPage = pageCount - intPage + 1;24             intEndPage = pageCount;25         }26         else {27             if (pageIndex <= intPage - intCrossPage) {28                 intBeginPage = 1;29                 intEndPage = intPage;30             }31             else {32                 intBeginPage = pageIndex - intCrossPage;33                 intEndPage = pageIndex + intCrossPage;34             }35         }36     } else {37         intBeginPage = 1;38         intEndPage = pageCount;39     }40 41     if (pageCount > 0) {42         for (var i = intBeginPage; i <= intEndPage; i++) {43             {44                 if (i == pageIndex) {//当前页45                     strPage = strPage + " <a class='current' href='javascript:void(0);'>" + i + "</a> ";46                 }47                 else {48                     strPage = strPage + " <a class='pageNav' href='" + url + "?pageIndex=" + i + "&pageSize=" + pageSize + "' title='第" + i + "页'>" + i + "</a> ";49                 }50             }51         }52     }53 54 55     if (pageIndex < pageCount) {56         strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "'><span>下一页</span></a> ";57         strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + pageCount + "&pageSize=" + pageSize + "'><span>尾页</span></a> ";58     }59     return strPage+"</div>";60 61 }

试用这个方法试试

  1 <!DOCTYPE html>  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  5     <title></title>  6     <script src="Script/Ajax-pager.js"></script>  7     <script src="Script/jquery-1.8.0.js"></script>  8     <script type="text/Javascript">  9         $(function () { 10             loadData(1, 10); 11              12             //分页条点击事件 13             $(document.body).on('click', '.pageNav', function () { 14                 var pageSize = Number(getQueryString('pageSize', $(this).attr('href'))); 15                 var pageIndex = Number(getQueryString('pageIndex', $(this).attr('href'))); 16                 loadData(pageIndex, pageSize); 17                 return false;//不跳转页面 18             }); 19         }); 20          21         //加载数据 22         function loadData(pageIndex, pageSize) { 23             $.getJSON('Content/CustomersData.txt', { pageIndex: pageIndex, pageSize: pageSize }, function (data) { 24                 var beginIndex = (pageIndex - 1) * pageSize; 25                 var endIndex = pageIndex * pageSize - 1; 26                 var tbodyHtml = ''; 27                 for (var i = beginIndex; i < endIndex; i++) { 28                     if (!data.Rows[i]) { 29                         break; 30                     } 31                     var tbody = '<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td>'; 32                     tbody += '<td>{6}</td><td>{7}</td><td>{8}</td><td>{9}</td><td>{10}</td></tr>'; 33                     tbody = tbody.format(data.Rows[i].CustomerID, data.Rows[i].CompanyName, data.Rows[i].ContactName, 34                         data.Rows[i].ContactTitle, data.Rows[i].Address, data.Rows[i].City, 35                         data.Rows[i].Region ? data.Rows[i].Region : '', data.Rows[i].PostalCode, data.Rows[i].Country, 36                         data.Rows[i].Phone, data.Rows[i].Fax ? data.Rows[i].Fax : ''); 37                     tbodyHtml += tbody; 38                 } 39                 $('#tb').find('tbody').first().html(tbodyHtml); 40                 var pageCount = parseInt((data.Total / pageSize)) + (data.Total % pageSize ? 1 : 0); 41                 $('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'CustomersData.txt')); 42             } 43             ); 44         } 45  46         //字符串格式化 47         String.PRototype.format = function (args) { 48             var result = this; 49             var reg; 50             if (arguments.length > 0) { 51                 if (arguments.length == 1 && typeof (args) == "object") { 52                     for (var key in args) { 53                         if (args[key] !== undefined) { 54                             reg = new RegExp("({" + key + "})", "g"); 55                             result = result.replace(reg, args[key]); 56                         } 57                     } 58                 } else { 59                     for (var i = 0; i < arguments.length; i++) { 60                         if (arguments[i] !== undefined) { 61                             reg = new RegExp("({)" + i + "(})", "g"); 62                             result = result.replace(reg, arguments[i]); 63                         } 64                     } 65                 } 66             } 67             return result; 68         }; 69          70         //获取url参数 71         function getQueryString(name, url) { 72             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 73             url = url && url.indexOf('?') >= 0 ? url.substring(url.indexOf('?'), url.length) : window.location.search; 74             var r = url.substr(1).match(reg); 75             if (r != null) return unescape(r[2]); return null; 76         } 77     </script> 78 </head> 79 <body> 80     <table id="tb" border="1" cellpadding="0" cellspacing="0"> 81         <thead> 82             <tr> 83                 <th width="90px;">CustomerID</th> 84                 <th width="240px;">CompanyName</th> 85                 <th width="130px;">ContactName</th> 86                 <th width="140px;">ContactTitle</th> 87                 <th width="205px;">Address</th> 88                 <th width="90px;">City</th> 89                 <th width="50px;">Region</th> 90                 <th width="80px;">PostalCode</th> 91                 <th width="80px;">Country</th> 92                 <th width="95px;">Phone</th> 93                 <th width="95px;">Fax</th> 94             </tr> 95         </thead> 96         <tbody></tbody> 97     </table> 98     <div id="dvPager"></div> 99 </body>100 </html>

看下效果