jQuery前端分页功能开发教程
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 = "<p 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+"</p>";
}
试用这个方法试试
<!doctype html>
<html xmlns="https://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')));
&nnbsp; 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>
<p id="dvpager"></p>
</body>
</html>
[/code]
看下效果
列有点多，我只截图了部分，界面好丑，加点样式，用bootstrap来美化下
使用nuget安装bootstrap
加上样式后
虽说不是特别漂亮，但还是对得起观众吧。
代码下载https://github.com/dengjianjun/jspager
上一篇： Flash游戏开发教程：第八节
下一篇： 实用的简单PHP分页集合包括使用方法