锋利的js前端分页之jQuery
大家在作分页时，多数是在后台返回一个导航条的html字符串，其实在前端用js也很好实现。
调用pager方法，输入参数，会返回一个导航条的html字符串。方法的内部比较简单。
/**
* pageSize, 每页显示数
* pageIndex, 当前页数
* pageCount 总页数
* url 连接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
var intPage = 7; //数字显示
var intBeginPage = 0;//开始的页数
var intEndPage = 0;//结束的页数
var intCrossPage = parseInt(intPage / 2); //显示的数字 var strPage = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>"; if (pageIndex > 1) {
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=1&pageSize=" + pageSize + "'><span>首页</span></a> ";
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex - 1) + "&pageSize=" + pageSize + "'><span>上一页</span></a> ";
}
if (pageCount > intPage) {//总页数大于在页面显示的页数 if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
intBeginPage = pageCount - intPage + 1;
intEndPage = pageCount;
}
else {
if (pageIndex <= intPage - intCrossPage) {
intBeginPage = 1;
intEndPage = intPage;
}
else {
intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex + intCrossPage;
}
}
} else {
intBeginPage = 1;
intEndPage = pageCount;
} if (pageCount > 0) {
for (var i = intBeginPage; i <= intEndPage; i++) {
{
if (i == pageIndex) {//当前页
strPage = strPage + " <a class='current' href='javascript:void(0);'>" + i + "</a> ";
}
else {
strPage = strPage + " <a class='pageNav' href='" + url + "?pageIndex=" + i + "&pageSize=" + pageSize + "' title='第" + i + "页'>" + i + "</a> ";
}
}
}
} if (pageIndex < pageCount) {
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "'><span>下一页</span></a> ";
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + pageCount + "&pageSize=" + pageSize + "'><span>尾页</span></a> ";
}
return strPage+"</div>"; }
试用这个方法试试
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Script/ajax-pager.js"></script>
<script src="Script/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function () {
loadData(1, 10); //分页条点击事件
$(document.body).on('click', '.pageNav', function () {
var pageSize = Number(getQueryString('pageSize', $(this).attr('href')));
var pageIndex = Number(getQueryString('pageIndex', $(this).attr('href')));
loadData(pageIndex, pageSize);
return false;//不跳转页面
});
}); //加载数据
function loadData(pageIndex, pageSize) {
$.getJSON('Content/CustomersData.txt', { pageIndex: pageIndex, pageSize: pageSize }, function (data) {
var beginIndex = (pageIndex - 1) * pageSize;
var endIndex = pageIndex * pageSize - 1;
var tbodyHtml = '';
for (var i = beginIndex; i < endIndex; i++) {
if (!data.Rows[i]) {
break;
}
var tbody = '<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td>';
tbody += '<td>{6}</td><td>{7}</td><td>{8}</td><td>{9}</td><td>{10}</td></tr>';
tbody = tbody.format(data.Rows[i].CustomerID, data.Rows[i].CompanyName, data.Rows[i].ContactName,
data.Rows[i].ContactTitle, data.Rows[i].Address, data.Rows[i].City,
data.Rows[i].Region ? data.Rows[i].Region : '', data.Rows[i].PostalCode, data.Rows[i].Country,
data.Rows[i].Phone, data.Rows[i].Fax ? data.Rows[i].Fax : '');
tbodyHtml += tbody;
}
$('#tb').find('tbody').first().html(tbodyHtml);
var pageCount = parseInt((data.Total / pageSize)) + (data.Total % pageSize ? 1 : 0);
$('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'CustomersData.txt'));
}
);
} //字符串格式化
String.prototype.format = function (args) {
var result = this;
var reg;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] !== undefined) {
reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
} else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] !== undefined) {
reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}; //获取url参数
function getQueryString(name, url) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
url = url && url.indexOf('?') >= 0 ? url.substring(url.indexOf('?'), url.length) : window.location.search;
var r = url.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</head>
<body>
<table id="tb" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="90px;">CustomerID</th>
<th width="240px;">CompanyName</th>
<th width="130px;">ContactName</th>
<th width="140px;">ContactTitle</th>
<th width="205px;">Address</th>
<th width="90px;">City</th>
<th width="50px;">Region</th>
<th width="80px;">PostalCode</th>
<th width="80px;">Country</th>
<th width="95px;">Phone</th>
<th width="95px;">Fax</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="dvPager"></div>
</body>
</html>
看下效果
列有点多，我只截图了部分，界面好丑，加点样式，用bootstrap来美化下
使用Nuget安装bootstrap
加上样式后
虽说不是特别漂亮，但还是对得起观众吧。
代码下载https://github.com/dengjianjun/JsPager
如果觉得对你有帮助，请点个赞，谢谢！
不足与错误之处，敬请批评指正！
锋利的js前端分页之jQuery的更多相关文章
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- 纯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 ...
随机推荐
- 【android】Android am命令使用
一.开启Activity.服务.广播 1.开启Activity.服务.广播基础知识 通过adb shell,可以使用activity manager(arm)工具来执行不同的系统操作,如开启一个act ...
- 手机网页调试利器： Chrome
新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页 ...
- 承接Hololens游戏外包
近日,微软宣布第三批微软Hololens开发者版开始发货,包括:头显.头显手提包和一个遥控器.前两批开发者版本分别在今年3月30日和5月9日开始发货的. 第三批AR头显Hololens开发者版发货 虽 ...
- CSS的一些简单概念
行内元素与块级元素 在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以容纳内联元素和其 ...
- FlashBuilder 新建项目时提示 java.lang.nullpointerexception
可以尝试安装 Air SDK
- 关于Maven项目
用maven 工程搭建项目,在搭建好之后,运行时却抛出了这样的错误: Error configuring application listener of class org.springframew ...
- 无法进入adb shell，提示unknown host service的解决办法
今天monkey的简易环境配置好后,准备开始monkey的压测工作,可是在命令控制窗口中输入无法进入adb shell,提示了错误 "unknown host service"
- CentOS下安装Redis及Redis的PHP扩展
1.安装Redis 1.1 如果没有安装wget,安装wget yum install wget 1.2 在http://redis.io/download页面查看redis版本,并下载安装 wget ...
- asp.net webform 中使用Microsoft ASP.NET Web Optimization压缩js及css
使用静态资源压缩可以合并静态资源文件减少客户端请求数量,压缩文件大小,减少网络流量的损耗. 注:只有通过web.config关闭调试功能,压缩才会生效 <system.web> <c ...
- 编译器zynq设置环境变量
设置临时环境变量export CROSS_COMPILE=arm-xilinx-linux-gnueabi- export PATH=/work/tool/cross_compiler/bin:$PA ...