jQuery前端分頁示例分享
大家在作分頁時,多數(shù)是在后臺返回一個導(dǎo)航條的html字符串,其實在前端用js也很好實現(xiàn)。
調(diào)用pager方法,輸入?yún)?shù),會返回一個導(dǎo)航條的html字符串。方法的內(nèi)部比較簡單。
/**
* pageSize, 每頁顯示數(shù)
* pageIndex, 當(dāng)前頁數(shù)
* pageCount 總頁數(shù)
* url 連接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
var intPage = 7; //數(shù)字顯示
var intBeginPage = 0;//開始的頁數(shù)
var intEndPage = 0;//結(jié)束的頁數(shù)
var intCrossPage = parseInt(intPage / 2); //顯示的數(shù)字
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) {//總頁數(shù)大于在頁面顯示的頁數(shù)
if (pageIndex > pageCount - intCrossPage) {//當(dāng)前頁數(shù)>總頁數(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)前頁
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>";
}
試用這個方法試試
復(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);
//分頁條點擊事件
$(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)頁面
});
});
//加載數(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]
看下效果
列有點多,我只截圖了部分,界面好丑,加點樣式,用bootstrap來美化下
使用Nuget安裝bootstrap
加上樣式后
雖說不是特別漂亮,但還是對得起觀眾吧。
代碼下載https://github.com/dengjianjun/JsPager
如果覺得對你有幫助,請點個贊,謝謝!
相關(guān)文章
jquery動態(tài)導(dǎo)航插件dynamicNav用法實例分析
這篇文章主要介紹了jquery動態(tài)導(dǎo)航插件dynamicNav用法,較為詳細的分析了jquery導(dǎo)航插件的原理及具體使用方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果
這篇文章主要介紹了jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果,涉及jquery鼠標hover事件及show與hide操作頁面元素的顯示與隱藏效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08jQuery實現(xiàn)頁面頂部顯示的進度條效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)頁面頂部顯示的進度條效果,以完整實例形式分析了jQuery基于animate與setTimeout定時觸發(fā)實現(xiàn)進度條漸進顯示功能,非常簡單實用,需要的朋友可以參考下2015-12-12jquery表格datatables實例解析 直接加載和延遲加載
這篇文章主要針對jquery表格datatables實例進行解析,可以直接加載和延遲加載,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08jQuery實現(xiàn)Email郵箱地址自動補全功能代碼
這篇文章主要介紹了jQuery實現(xiàn)Email郵箱地址自動補全功能代碼,涉及jQuery鼠標事件及字符操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11