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，可以根據自己的喜好定制樣式