js 带省略号的分页源码及应用实例

一、js：pagination.js

/*--说明
分页div id为：changpage
*/
var eachPageDataNum = 10;//每页显示记录数
var nowPage = 1;//当前页码
var pagecount = 0;//总页数
var recordcount = 0;//总记录数
var nowPageStart = 1;//当前起始页码
var pagination = 3; //页码个数
function PagingLoad(datanum, pagenum, totalRecord, loadData) {
recordcount = totalRecord;
eachPageDataNum = datanum;
pagination = pagenum;
pagecount = Math.ceil(recordcount / eachPageDataNum);
loadPage();
addEvent();
loadData(1);
};

//分页布局样式
function loadPage() {
//首页
var vHome = '<a href="javascript:void(0)" >首页</a> ';
//主体--页码
var vPage = "<div id='pageN' style='display:inline'>";
for (var i = 1; i <= pagination; i++) {
if (i == nowPage) vPage += '<a href="javascript:void(0)" class="cur">' + i + '</a> '
else vPage += '<a href="javascript:void(0)">' + i + '</a> '
}
vPage += "</div>";
var vElsePre = "<div id='pElsePre' style='display:inline'><a href='javascript:void(0)' type='pre'>...</a></div>";
var vElseNext = "<div id='pElseNext' style='display:inline'><a href='javascript:void(0)' type='next'>...</a></div>";
var vPEnd = '<a href="javascript:void(0)">' + pagecount + '</a>';
//尾页
var vEnd = '<a href="javascript:void(0)">尾页</a> '
//下一页
vNext = '<a href="javascript:void(0)">下一页</a> '
//上一页
vPre = '<a href="javascript:void(0)">上一页</a> '
//跳转
vGo = '<span class="p_tz">到<input type="text" value="' + nowPage + '" id="goPageNo">页<a href="javascript:void(0)">跳转</a></span>';
//总页数 总记录数
vTotal = '<span class="p_page">共' + pagecount + "页, 共" + recordcount + "条记录";
var result = vHome + vPre + vElsePre + vPage + vElseNext + vNext + vEnd + vGo + vTotal;
document.getElementById("changpage").innerHTML = result;
OtherDisplay();
$("#goPageNo").keyup(function () {
//如果输入非数字，则替换为''，如果输入数字，则在每4位之后添加一个空格分隔
this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
})
}

//分页按钮事件
function addEvent() {
var n = 0;
$('#changpage a').bind("click", function () {
switch ($(this).text()) {
case "首页": var b = (nowPageStart != 1); nowPage = nowPageStart = 1; ReLoad(b); $('#pageN a').eq(0).addClass("cur"); break;
case "尾页": var b = (parseInt(nowPageStart + pagination) < pagecount); nowPage = pagecount; nowPageStart = pagecount - pagination + 1; ReLoad(b); $('#pageN a').eq(pagination - 1).addClass("cur"); break;
case "上一页": if (nowPage != 1) nowPage = parseInt(nowPage) - 1; else break; var b = (nowPage < nowPageStart); if (b) { nowPageStart = nowPageStart - pagination; ReLoad(b); $('#pageN a').eq(pagination - 1).addClass("cur"); } else { ReLoad(b); $('#pageN a').eq(nowPage - nowPageStart).addClass("cur"); } break;
case "下一页": if (nowPage != pagecount) nowPage = parseInt(nowPage) + 1; else break; var b = (nowPage > parseInt(nowPageStart + pagination - 1)); if (b) { nowPageStart = nowPageStart + pagination; ReLoad(b); $('#pageN a').eq(0).addClass("cur"); } else { ReLoad(b); $('#pageN a').eq(nowPage - nowPageStart).addClass("cur"); } break;
case "...":
if ($(this).attr('type') == "pre") {
nowPage = nowPageStart = parseInt(nowPageStart - pagination);
if (nowPage < 0) nowPage = nowPageStart = 1;
}
else {
nowPage = nowPageStart = parseInt(nowPageStart + pagination);
if (nowPage > pagecount) nowPage = nowPageStart = pagecount;
}
//重置分页
PageNumLoad();
PageNumEvent();
loadData(nowPage);
break;
case "跳转":
gotoPage();
break;
default: nowPage = $(this).text();
loadData(nowPage);
$('.cur').removeClass('cur');
$(this).addClass('cur');
break;
}
});
}

//跳转事件
function gotoPage() {
var nPage = $("#goPageNo").val();
if ((nPage != null && nPage < 1) || (pagecount != null && nPage > pagecount) || eachPageDataNum < 0 || nowPageStart < 0) return;
else {
nowPage = nPage;
var b = (nowPage >= parseInt(nowPageStart + pagination) || nowPage <= nowPageStart);
if (b) {
nowPageStart = Math.ceil(nowPage / pagination) * pagination - pagination + 1;
}
ReLoad(b);
$('#pageN a').eq((nowPage - 1) % pagination).addClass("cur");
}
}

//设置 “...” 是否显示
function OtherDisplay() {
if (nowPageStart == 1) {
$("#pElsePre").hide();
}
else {
$("#pElsePre").show();
}
if (parseInt(nowPageStart + pagination) >= pagecount) {
$("#pElseNext").hide();
}
else {
$("#pElseNext").show();
}
}

//页面页码布局重载
function PageNumLoad() {
var vPage = "<div id='pageN' style='display:inline'>";
for (var i = nowPageStart; i < parseInt(pagination + nowPageStart) ; i++) {
if (i == nowPage) vPage += '<a href="javascript:void(0)" class="cur">' + i + '</a> '
else vPage += '<a href="javascript:void(0)">' + i + '</a> '
}
vPage += "</div>";
$("#pageN").replaceWith(vPage);
OtherDisplay();
}

//页码注册click事件
function PageNumEvent() {
$('#pageN a').bind("click", function () {
$('.cur').removeClass('cur');
$(this).addClass('cur');
loadData($(this).text());
});
}

//重载页码
function ReLoad(reload) {
if (reload) {
PageNumLoad();
PageNumEvent();
}
loadData(nowPage);
$('.cur').removeClass('cur');
}

二、实例，调用上面的js

Index.cshtml

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Pagination.js"></script>@*分页js*@
<link href="~/Content/Pagination.css" rel="stylesheet" />
<style>
td {
border: solid #add9c0;
border-width: 0px 1px 1px 0px;
padding-right: 20px;
}

table {
border: solid #add9c0;
border-width: 1px 0px 0px 1px;
}
</style>
<script>
var recordcount = 0;//总记录数
$(function () {
recordcount = '@ViewBag.Count';
PagingLoad(6, 5, recordcount, loadData)//loadData是获取数据函数
});

//获取数据
function loadData(nPage) {
nowPage = nPage;
$.getJSON("/Home/GetData",
{ r: Math.random(), pg: nPage, ps: eachPageDataNum }, function (data) {
$("#data").empty();
var table = "<table>";

$.each(data.Data, function (i, item) {
table += "<tr><td>" + item.id + "</td><td>" + item.name + "</td><td>" + item.age + "</td>></tr>";
});
table += "</table>";
$("#data").html(table);
});
}
</script>
<body>
<div id="data"></div>
<div class="pages" id="changpage"></div>
</body>

controller：

namespace Pagination.Controllers
{
public class Person{
public string id;
public String name;
public int age;
public Person(){}
public Person(string id,string name,int age)
{
this.id=id;
this.name=name;
this.age=age;
}
}
public class HomeController : Controller
{
List<Person> list;
//ArrayList list = new ArrayList();
private void CreateData()
{
list = new List<Person>();
for(int i=1;i<=50;i++)
{
list.Add(new Person(DateTime.Now.Ticks.ToString() + i, "Person"+i, i));
}
}
public ActionResult Index()
{
ViewBag.Count = 50;
return PartialView();
}

public string GetData()
{
CreateData();
int pageNum = int.Parse(Request["pg"]);
int pageSize = int.Parse(Request["ps"]);
string str = "";
for (int i = (pageNum - 1) * pageSize; i < pageNum * pageSize;i++ )
{
Person p =list[i];
str += "{";
str += "\"id\": \"" + p.id+ "\",";
str += "\"name\": \"" + p.name + "\",";
str += "\"age\": \"" + p.age + "\",";

str = str.Substring(0, str.Length - 1);
str += "},";
}
if (str.Length != 0)
{
str = str.Substring(0, str.Length - 1);
}
return "{\"Data\":[" + str + "]}";
}

}
}

这里没有贴出css，可以根据自己的喜好定制样式