Javascript ページング コード例の共有 (js ページング)_JavaScript スキル

電話:

コードをコピー コードは次のとおりです。

var pageChange = function (index) {
html = pager("divid",index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });
}

実装:

コードをコピー コードは次のとおりです:

pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {

var theOpt = {
barSize: 5, //ページングで表示されるページ数bar
barTemplate: "{bar} total {totalPage} ページ {totalCount} items {goto}", // テンプレートを表示
autoHide: true, // 自動的に非表示にするかどうか
showFirst: true, // In totalPage>barSize 最初のページのリンクを自動表示するかどうか
showLast: true, // totalPage>barSize のときに最後のページのリンクを自動表示するかどうか
showGoTo: true, // GoTo を表示するかどうか
autoHideGoTo : true / / 数が少なすぎる場合、GoTo
を自動的に非表示にするかどうか };

if (opt) {
if (opt.barSize)
theOpt.barSize = opt.barSize ; .barTemplate)
theOpt.barTemplate = opt.barTemplate;
if (opt.autoHide == false)
theOpt.autoHide = false;
if (opt.showFirst == false)
theOpt.showFirst = false;
if (opt.showLast = false)
theOpt.showLast = false;
if (opt.showGoTo == false)
theOpt.showGoTo = false;
if (opt.autoHideGoTo == false)
theOpt.autoHideGoTo = false; ));

if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;

var startPage = 0; //ページング バーの開始ページ
var endPage = 0; //ページング バーの終了ページ
var showFirst = true;
var showLast = true;


if (isNaN(pageIndex)) {
pageIndex = 1;
}
pageIndex = parseInt(pageIndex);
if (pageIndex pageIndex = 1;
if (pageIndex * pageSize > totalCount) {
pageIndex = Math.ceil( totalCount / pageSize);
}

if (totalCount == 0) { //データがない場合
document.getElementById(divPager).innerHTML = "";
return ""; }

var totalPage = Math.ceil(totalCount / pageSize);
if (theOpt.autoHide && totalCount <= pageSize) { //自動非表示
document.getElementById(divPager ).innerHTML = "";
ページ ;
theOpt.showLast = theOpt.showFirst = false;

else {
if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //最初の数ページ
startPage = 1;
endPage = theOpt.barSize;
theOpt.showFirst = false;
}
else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //最後の数ページ
startPage = totalPage - theOpt.barSize 1;
endPage = totalPage;
theOpt.showLast = false;
}
else { 🎜> endPage = pageIndex Math.floor(theOpt.barSize / 2);
最後 = theOpt .showFirst = false ;
}
}

function _getLink(index, txt) {
style='マージン: 2px 5px;ボーダー: 1px ソリッド #6d8cad;color : #0269BA;パディング: 2px 5px ;テキスト装飾: なし;' onclick='myPagerChanges["" divPager ""](" Index ")'> ;" txt "";
}

var barHtml = ""; //ページ bar
barHtml = pageIndex == 1 ? "" : _getLink(pageIndex - 1, "前のページ");
if (theOpt.showFirst) {
barHtml (1) ) "...";
}
for ( varindex = startPage;index <= endPage;index ) {

if (index == pageIndex) {
barHtml = "index "";
if ( Opt.showLast) {
barHtml = "..." _getLink(totalPage);
}
barHtml = pageIndex == totalPage "" : _getLink(pageIndex 1, "次のページ ");

var gotoHtml = ""; //ボックスとボタンに移動
if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
if (( theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
var txtid = divPager "_goIndex";
var indexVal = "document.getElementById("" txtid " ") .value" ;
gotoHtml = "";
gotoHtml = " ";
}
}

//代替模板
var pagerHtml = theOpt.barTemplate.replace(" {bar}", barHtml)
.replace("{totalCount}", totalCount)
.replace("{pageIndex}", pageIndex)
.replace("{totalPage}", totalPage)
.replace("{goto}", gotoHtml);

document.getElementById(divPager).innerHTML = pagerHtml;
return pagerHtml;
};