jQuery フロントエンド ページングの例 Sharing_jquery
jquery
ページングを実行すると、ほとんどの場合、バックグラウンドでナビゲーション バーの HTML 文字列が返されます。実際、フロントエンドで js を使用して実装するのも簡単です。
ページャー メソッドを呼び出し、パラメーターを入力すると、ナビゲーション バーの HTML 文字列が返されます。メソッドの内部は比較的単純です。
コードをコピー コードは次のとおりです:
/**
* ページサイズ、ページごとに表示される数
* 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 = "
page" pageIndex "/" pageCount " ページあたりのページ数< ;font color='#FF0000'>" pageSize " ストリップ";
If (pageIndex > 1) {
strPage = strPage "ホームページ ";
strPage = strPage "前のページ< /a> ; ";
}
If (pageCount > intPage) {//ページの総数がページに表示されているページ数より大きい
If (pageIndex > pageCount - intCrossPage) {//現在のページ番号 > 総ページ数 - 3
intBeginPage = pageCount - intPage 1;
intEndPage = pageCount;
}
else {
If (pageIndex intBeginPage = 1;
intEndPage = intPage;
}
else {
intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex intCrossPage;
}
}
} else {
intBeginPage = 1;
intEndPage = pageCount;
}
If (pageCount > 0) {
for (var i = intBeginPage; i {
If (i == pageIndex) {//現在のページ
strPage = strPage " " i " ";
}
else {
strPage = strPage " " i " 🎜> }
}
}
}
If (pageIndex < pageCount) {
strPage = strPage "次のページ ";
strPage = strPage "尾页 ";
}
return strPage "
";If (pageIndex > 1) {
strPage = strPage "ホームページ ";
strPage = strPage "前のページ< /a> ; ";
}
If (pageCount > intPage) {//ページの総数がページに表示されているページ数より大きい
If (pageIndex > pageCount - intCrossPage) {//現在のページ番号 > 総ページ数 - 3
intBeginPage = pageCount - intPage 1;
intEndPage = pageCount;
}
else {
If (pageIndex intBeginPage = 1;
intEndPage = intPage;
}
else {
intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex intCrossPage;
}
}
} else {
intBeginPage = 1;
intEndPage = pageCount;
}
If (pageCount > 0) {
for (var i = intBeginPage; i {
If (i == pageIndex) {//現在のページ
strPage = strPage " " i " ";
}
else {
strPage = strPage " " i " 🎜> }
}
}
}
If (pageIndex < pageCount) {
strPage = strPage "次のページ ";
strPage = strPage "尾页 ";
}
return strPage "
}
この方法を試してください
复制代
http://www.w3.org/1999/xhtml">
<頭>
<スクリプトタイプ="text/javascript">
$(関数() {
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;//不跳转页面
});
});
//追加データ
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]) {
休憩;
}
var tbody = '
tbody = '
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 = 関数 (引数) {
var result = this;
var reg;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "オブジェクト") {
for (引数内の var キー) {
if (args[key] !== 未定義) {
reg = new RegExp("({" key "})", "g");
result = result.replace(reg, args[key]);
}
}
} else {
for (var i = 0; i < argument.length; i ) {
if (引数[i] !== 未定義) {
reg = new RegExp("({)" i "(})", "g");
result = result.replace(reg, argument[i]);
}
}
}
}
結果を返します;
};
//获取urlパラメータ
関数 getQueryString(名前, 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]); null を返す;
}
| 顧客ID | 会社名 | 連絡先名 | 連絡先タイトル | 住所 | 都市 | 地域 | 郵便番号 | 国 | 電話 | FAX |
|---|