jQuery前端分頁(yè)示例分享
大家在作分頁(yè)時(shí)，多數(shù)是在后臺(tái)返回一個(gè)導(dǎo)航條的html字符串，其實(shí)在前端用js也很好實(shí)現(xiàn)。
調(diào)用pager方法，輸入?yún)?shù)，會(huì)返回一個(gè)導(dǎo)航條的html字符串。方法的內(nèi)部比較簡(jiǎn)單。
/**
* pageSize, 每頁(yè)顯示數(shù)
* pageIndex, 當(dāng)前頁(yè)數(shù)
* pageCount 總頁(yè)數(shù)
* url 連接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
var intPage = 7; //數(shù)字顯示
var intBeginPage = 0;//開(kāi)始的頁(yè)數(shù)
var intEndPage = 0;//結(jié)束的頁(yè)數(shù)
var intCrossPage = parseInt(intPage / 2); //顯示的數(shù)字
var strPage = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 頁(yè) 每頁(yè) <font color='#FF0000'>" + pageSize + "</font> 條</span>";
if (pageIndex > 1) {
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=1&pageSize=" + pageSize + "'><span>首頁(yè)</span></a> ";
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex - 1) + "&pageSize=" + pageSize + "'><span>上一頁(yè)</span></a> ";
}
if (pageCount > intPage) {//總頁(yè)數(shù)大于在頁(yè)面顯示的頁(yè)數(shù)
if (pageIndex > pageCount - intCrossPage) {//當(dāng)前頁(yè)數(shù)>總頁(yè)數(shù)-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) {//當(dāng)前頁(yè)
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 + "頁(yè)'>" + i + "</a> ";
}
}
}
}
if (pageIndex < pageCount) {
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "'><span>下一頁(yè)</span></a> ";
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + pageCount + "&pageSize=" + pageSize + "'><span>尾頁(yè)</span></a> ";
}
return strPage+"</div>";
}
試用這個(gè)方法試試
復(fù)制代碼
<!DOCTYPE html>
<html xmlns="
<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);
//分頁(yè)條點(diǎn)擊事件
$(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;//不跳轉(zhuǎn)頁(yè)面
});
});
//加載數(shù)據(jù)
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參數(shù)
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>
[/code]
看下效果
列有點(diǎn)多，我只截圖了部分，界面好丑，加點(diǎn)樣式，用bootstrap來(lái)美化下
使用Nuget安裝bootstrap
加上樣式后
雖說(shuō)不是特別漂亮，但還是對(duì)得起觀眾吧。
代碼下載https://github.com/dengjianjun/JsPager
如果覺(jué)得對(duì)你有幫助，請(qǐng)點(diǎn)個(gè)贊，謝謝！
相關(guān)文章
jQuery使用手冊(cè)之二 DOM操作...2007-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery插件實(shí)現(xiàn)圖片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細(xì)介紹了jquery自定義右鍵菜單、全選、不連續(xù)選擇的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery防止click雙擊多次提交及傳遞動(dòng)態(tài)函數(shù)或多參數(shù)
這篇文章主要介紹了jQuery防止click雙擊多次提交及傳遞動(dòng)態(tài)函數(shù)方法,需要的朋友可以參考下2014-04-04
jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實(shí)現(xiàn)方法,涉及jQuery針對(duì)表格與頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-06-06
jquery實(shí)現(xiàn)煙花效果(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了jquery面向?qū)ο髮?shí)現(xiàn)煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
本文給大家詳細(xì)講解的是如何利用jquery.more.js實(shí)現(xiàn)點(diǎn)擊加載更多后在本頁(yè)面內(nèi)下面加載數(shù)據(jù)，十分的實(shí)用，有需要的小伙伴可以參考下。2015-05-05
JQuery通過(guò)鍵盤(pán)控制鍵盤(pán)按下與松開(kāi)觸發(fā)事件
這篇文章主要介紹了JQuery通過(guò)鍵盤(pán)控制鍵盤(pán)按下與松開(kāi)觸發(fā)事件，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表,結(jié)合具體實(shí)例形式分析了jQuery日期時(shí)間運(yùn)算構(gòu)造級(jí)聯(lián)下拉列表相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
改善你的jQuery的25個(gè)步驟 千倍級(jí)效率提升
改善你的jQuery的25個(gè)步驟 -- 從頭看完會(huì)有無(wú)數(shù)收獲,千倍級(jí)效率提升2010-02-02