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', '.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>
看下效果
列有点多，我只截图了部分，界面好丑，加点样式，用bootstrap来美化下
使用Nuget安装bootstrap
加上样式后
虽说不是特别漂亮，但还是对得起观众吧。
代码下载https://github.com/dengjianjun/JsPager
如果觉得对你有帮助，请点个赞，谢谢！
不足与错误之处，敬请批评指正！
js前端分页之jQuery的更多相关文章
- 锋利的js前端分页之jQuery
大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. /** * pageSi ...
- 纯JS前端分页方法（JS分页）
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- js 前端分页空间控件
现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查 ...
- js前端分页
转载:http://www.cnblogs.com/lyzg/p/5791011.html http://www.cnblogs.com/m-m-g-y0416/p/5601903.html
- 前端分页神器，jquery grid的使用（前后端联调），让分页变得更简单。
jquery grid 是一款非常好用的前端分页插件,下面来讲讲怎么使用. 首先需要引入jquery grid 的CSS和JS (我们使用的是bootstrap的样式) 下面我们通过一个例子来讲解,需 ...
- 纯Jquery前端分页
---恢复内容开始--- 由于之前自己做过jquery分页,就是调用jni接口时,只能用前台分页解决显示问题.最近看到有人提这样的问题:一个请求传过来上万个数据怎么办?于是萌生了写这篇博客的想法. 效 ...
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...
- jQuery插件实例六:jQuery 前端分页
先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEve ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
随机推荐
- 设计模式-----观察者模式（Obsever）
它定义了对象之间一对多的依赖关系.因此,.当一个对象的状态变化,对吸毒成瘾者,他将收到通知和更新自己主动. 观察者模式的组成: 抽象主题角色:把全部对观察者对象的引用保存在一个集合中.抽象主题提供一个 ...
- Java，JSP，JavaScript三和差异
JSP代表:java server page,意义是基于JAVA服务器的网络技术,随着asp,php喜欢,我们正在创造的语言网页 JavaScript:它已成为JS,随着JAVA系,就是赶时髦起个这名 ...
- 完美世界3D格斗手游[格斗宝贝]今日公測
狗刨学习网报道 / 经过近两年井喷式的发展,国内手游市场洗牌的信号愈加强烈.用户体验的提升.以及对产品核心品质的要求.促进了手游的精品化.而白热化的市场竞争,也催生了各大厂商在细分市场的抢滩.当中.更 ...
- Cocos2d Lua 越来越小样本 内存游戏
1.游戏简介 一个"记忆"类的比赛游戏.你和电脑对战,轮到谁的回合,谁翻两张牌,假设两张牌一样.就消掉这两张牌,得2分,能够继续翻牌,假设两张牌不一样,就换一个人.直到最后.看谁的 ...
- .Net程序猿乐Android发展---(10)框架布局FrameLayout
帧布局FrameLayout中全部的控件都在界面的左上側,后绘制的空间会覆盖之前的控件.布局内控件以层叠方式显示,用在游戏开发方面可能多些. 1.层叠展示 以下这个样例 ...
- Java读书笔记三（字符串）
1.介绍 本篇博客将对JAVA中的字符串类的基本知识进行介绍.主要字符串类的一些经常用法等内容. 2.字符串对象的创建 1.有两种形式.可是在开发中常常习惯于String 变量名的形式来进行操作. & ...
- SpringMVC 学习笔记(两) @RequestMapping、@PathVariable和其他注意事项
1.1. @RequestMapping映射请求 SpringMVC 采用 @RequestMapping 注解为控制器指定能够处理那些URL 请求 @requestMapping 能够定义在 类 ...
- Cocos2d-X中间应用
(层)Laye:与球员打交道响应事件Node子类. 不同的场景,层通常包括直接在屏幕上呈现的内容.而且能够接受用户的输入事件.包括触摸,加速度计和键盘输入等. 我们须要在层中加入精灵,文本标签或者其它 ...
- SharePoint 2013 添加Ribbon菜单
原文:SharePoint 2013 添加Ribbon菜单 前言:今天,我们尝试一下添加SharePoint2013的Ribbon菜单,这个Ribbon菜单是由XML定义,JavaScript脚本来实 ...
- JQuery读取Exif信息
<!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...