ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery フロントエンドページングの例 Sharing_jquery

jQuery フロントエンドページングの例 Sharing_jquery

WBOYオリジナル: 2016-05-16 16:14:431407ブラウズ

ページングを実行すると、ほとんどの場合、バックグラウンドでナビゲーションバーの 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 "

";
}

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

复制代

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 = '{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 < 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 を返す;
        }