ホームページ >ウェブフロントエンド >jsチュートリアル >ページャー コントロールの jquery 実装 example_jquery
ページャー コントロールの jquery 実装 example_jquery
- WBOYオリジナル
- 2016-05-16 16:52:531389ブラウズ
js:
コードをコピー コードは次のとおりです:
$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {
if (cfg && pageIndex > 0 && pageSize>0) {
var token = "#" this.attr("id");
this.empty();
var pageFirst = function () {
$(token).JPager(cfg, 1, pageSize);
};
var pagePre = function () {
$(token).JPager(cfg, pageIndex - 1, pageSize);
};
var pageLast = function () {
$(token).JPager(cfg, parseInt($("#_tot").val()), pageSize);
};
var pageNext = function () {
$(トークン).JPager(cfg, pageIndex 1, pageSize);
};
var pageNumber = function () {
$(トークン).JPager(cfg, parseInt($( this).text()), pageSize);
};
var pageGo = function () {
varindex = parseInt($("#_pos").val());
var total = parseInt($("#_tot").val());
if (インデックス) {
if (インデックス > 合計) {
(トークン).JPager( cfg, total, pageSize);
}
else if (index $(token).JPager(cfg, 1, pageSize);
}
else {
$(トークン).JPager(cfg,index,pageSize);
}
}
};
var checkGoNumber = function () {
if (!Number(this.value)) {
this.value = "";
}
else {
this.value = Number(this.value);
}
};
var initCustomer = function (recordCount) {
if (cfg.customer) {
if (cfg.customer.template) {
var t = .customer.template;
t = t.replace(/%total%/gi, Math.ceil(recordCount / pageSize)).replace(/%current%/gi, pageIndex).replace(/%recordCount%/gi, RecordCount).replace(/% pageSize%/gi, pageSize);
if (cfg.customer.position == "right") {
$("#_right").after(t);
}
else {
$("#_left").before(t);
}
}
}
};
varchangeState = function (合計) {
if (pageIndex == 1) {
$("#_first").attr("class", "unable");
$("#_pre").attr("class", "unable" );
}
else {
$("#_first").bind("click", pageFirst).attr("class", "number");
$("# _pre ").bind("click", pagePre).attr("class", "number");
}
if (pageIndex == total) {
$("#_last").attr ("クラス", "使用不可");
$("#_next").attr("クラス", "使用不可");
}
else {
$("#_last 」 ).bind("click", pageLast).attr("class", "number");
$("#_next").bind("click", pageNext).attr("class", "number" ");
}
};
var initNumber = function (total, count, current) {
if (total > 0 && カウント > 0) {
if (現在 現在 = 1;
}
if (現在 > 合計) {
現在 = 合計;
}
var endIndex = total;
var startIndex = 1;
var temp = current Math.floor(count / 2);
if (温度 if (温度 endIndex = count;
}
else {
startIndex = temp - count 1;
endIndex = temp;
}
else {
if (合計 > カウント) {
startIndex = カウント 1;
}
$("#_number").empty();
for (var i = startIndex; i <= endIndex; i ) {
var html = $("").text(i).bind("click", pageNumber);
if (i == current) {
$("#_number").append(html.attr("class", "selected"));
}
else {
$( "#_number").append(html.attr("class", "number"));
}
}
}
};
var initPager = function (data) {
if ($.isArray(data.SearchResult) && data.RecordCount > 0) {
$(token).append("< span id='_left'>首页 上一页 input id='_to' type='button' value='GO'/> 下一页 末页 ");
var total = Math.ceil(data.RecordCount / pageSize);
$("#_tot").val(total);
$("#_pos").bind(" Blur", checkGoNumber);
$("#_to").bind("click", pageGo);
changeState(total);
if (cfg.showNumber && cfg. > ; 0) {
initNumber(total, cfg.count, pageIndex);
}
initCustomer(data.RecordCount);
}
};
if (cfg .action) {
if (cfg.action.url && cfg.action.data) {
var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf("}") ) ',"pageIndex":' pageIndex ',"pageSize":' pageSize "}";
if (cfg.action.callback && $.isFunction(cfg.action.callback)) {
$.ajax ({
type: "post",
url: cfg.action.url,
dataType: "json",
contentType: "text/json",
data: d,
成功: function (data) {
initPager(data.d);
cfg.action .callback(data.d);
}
});
}
url: cfg.action.url,
dataType: "json",
contentType: "text/ json",
データ: d,
成功: 関数 (データ) {
initPager(data.d);
}
) > }
}
}
});
css:
コードは次のとおりです:#_pos { 幅 : 40px;}.unable
{ カラー: #BCC0BB;
}
.number
{
マージン: 2px;
color:# 0000FF;
text-decoration:underline;
}
.selected
{
margin: 2px;
color: #FF0000;
font-weight: 太字;
}
html:
コードをコピー }
.number
{
マージン: 2px;
color:# 0000FF;
text-decoration:underline;
}
.selected
{
margin: 2px;
color: #FF0000;
font-weight: 太字;
}
html: