锋利的js前端分页之jQuery

原文:锋利的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) {//当前页数>总页数-3
23             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', '.page', 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>

看下效果

列有点多,我只截图了部分,界面好丑,加点样式,用bootstrap来美化下

使用Nuget安装bootstrap

加上样式后

虽说不是特别漂亮,但还是对得起观众吧。

代码下载https://github.com/dengjianjun/JsPager

如果觉得对你有帮助,请点个赞,谢谢!

不足与错误之处,敬请批评指正!

时间: 2024-09-17 15:03:23

锋利的js前端分页之jQuery的相关文章

Javascript vue.js表格分页,ajax异步加载数据_基础知识

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

纯JS前端实现分页代码_javascript技巧

先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的  网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所

jquery分页插件jquery.pagination.js使用方法解析_jquery

这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家.参数说明 插件代码js代码: /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version 1.1 * @param {int} m

基于Bootstrap和jQuery构建前端分页工具实例代码_jquery

前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

asp.net jquery无刷新分页插件(jquery.pagination.js)_实用技巧

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

jquery分页插件jquery.pagination.js实现无刷新分页_jquery

本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值

vue.js表格分页示例_javascript技巧

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

laypage前端分页插件实现ajax异步分页_AJAX相关

本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 function GetList(pageIndex) { var _this = "" var clone_this = ""; _this = $(".BindDataList");//数据列表容器, clone_this = _this.clone(true); var pageSize = 25;//每页展示的条数

锋利的js之验证身份证号

原文:锋利的js之验证身份证号 我们在做互联网网站时,注册个人资料时,经常要用到身份证号,我们需要对身份证进验证,不然别人随便输个号码就通过,让你感觉这个网站做得很shit. 身份证号是有规则的. 结构和形式 1.号码的结构  公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码.  2.地址码  表示编码对象常住户口所在县(市.旗.区)的行政区划代码,按GB/T2260的规定执行.  3.出生日