jQuery フロントエンド ページングの例 Sharing_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 " ページあたりのページ数" pageSize " ストリップ";
If (pageIndex > 1) {
strPage = strPage "ホームページ ";
strPage = strPage "前のページ }
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 strPage = strPage "次のページ a> ";
        strPage = strPage "尾页 ";
    }
    return strPage "

";
}

この方法を試してください

复制代

http://www.w3.org/1999/xhtml">

   
   

   
   
   
        $(関数() {
            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                     if (!data.Rows[i]) {
                        休憩;
                    }
                    var tbody = ' {0} {1} {2} {3 } {4} {5};
                    tbody = '{6} {7} {8} {9}> ;{10} ';
                    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                         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