Jquery ページング プラグインを変換する方法 (サーバー側ページング)_jquery

(function ($){
$.extend(String.prototype, {
isPositiveInteger:function(){
return (new RegExp(/^[1-9]d*$/).test(this) );
},
replaceAll:function(os, ns) {
return this.replace( new RegExp(os,"gm"),ns);
}
});
$.fn.extend({
hoverClass: function(className){
var _className = className || "ホバー";
return this.each(function(){
$( this).hover(function(){
$(this).addClass(_className);
}, function(){
$(this).removeClass(_className));
}
}); >var DWZ = {
frag: {},
init: function (pageFrag) {
$.ajax({
type: 'GET',
url: pageFrag,
dataType: 'xml'、
タイムアウト: 50000、
キャッシュ: false、
エラー: function (xhr) {
alert('XML ドキュメントの読み込みエラー: ' pageFrag "nHttp status: " xhr. status " " xhr.statusText);
},
成功: function (xml) {
DWZ.frag["pagination"]= $(xml).find("#pagination").text( );
}
});


ページネーション.js:



コピーcode

(function($){
$.fn.pagination = function(opts){
var settings = {
first$:"li.j-first", prev$: "li.j-prev"、next$:"li.j-next"、last$:"li.j-last"、nums$:"li.j-num>a"、jumpto$:"li.jumpto ",
pageNumFrag:'

#pageNum#

'
};
return this.each(function(){
var $this = $(this);
var pc = new Pagination(opts);
var interval = pc.getInterval();
var pageNumFrag = '';
for (var i=interval.start; ipageNumFrag = settings.pageNumFrag.replaceAll("#pageNum#", i).replaceAll(" #liClass#", i==pc.getCurrentPage() ? 'selected j-num' : 'j-num');
}
$this.html(DWZ.frag["pagination"].replaceAll ("#pageNumFrag#", pageNumFrag).replaceAll("#currentPage#", pc.getCurrentPage())).find("li").hoverClass();
var $first = $this.find(setting) .first$);
var $prev = $this.find(setting.prev$);
var $next = $this.next$); .find(setting.last$);
if (pc.hasPrev()){
$first.add($prev).find(">span").hide();
_bindEvent($prev, pc.getCurrentPage()-1, pc.targetType());
_bindEvent($first, 1, pc.targetType());
} else {
$first.add($prev).addClass("disabled").find(">a").hide();
}
if (pc.hasNext()) {
$next.add($last).find(">span").hide();
_bindEvent($next, pc.getCurrentPage() 1, pc.targetType());
_bindEvent($last, pc.numPages(), pc.targetType());
} else {
$next.add($last).addClass("disabled").find(">a").hide();
}
$this.find(setting.nums$).each(function(i){
_bindEvent($(this), i Interval.start, pc.targetType());
});
$this.find(setting.jumpto$).each(function(){
var $this = $(this);
var $inputBox = $this.find(":text");
var $button = $this.find(":button");
$button.click(function(event){
var pageNum = $inputBox.val();
if (pageNum) && pageNum.isPositiveInteger()) {
PageBreak({ pageNum: pageNum });
$inputBox.keyup(function(event){
if (イベント . keyCode == 13) $button.click();
});
});
function _bindEvent(jTarget, pageNum, targetType){
jTarget.bind("click", {pageNum:pageNum}, function(event){
PageBreak({ pageNum:event.data.pageNum }) ;
event.preventDefault()
});
}
}
var Pagination = function(opts) {
this.opts = $.extend({
targetType:"navTab", // navTab, ダイアログ
totalCount: 0、
numPerPage:10、
pageNumShown:10、
currentPage:1、
callback:function(){return false;}
}、opts);
}
$.extend(Pagination.prototype, {
targetType:function(){return this.opts.targetType},
numPages:function() {
return Math.ceil( this.opts.totalCount/this.opts.numPerPage);
},
getInterval:function(){
var ne_half = Math.ceil(this.opts.pageNumShown/2); np = this.numPages();
var upper_limit = np - this.opts.pageNumShown;
var start = this.getCurrentPage() > ne_half(Math.min(this.getCurrentPage()) - ne_half, upper_limit), 0 ) : 0;
var end = this.getCurrentPage() > ne_half ? Math.min(this.getCurrentPage() ne_half, np) : Math.min(this.opts.pageNumShown, np);
return {start:start 1, end:end 1},
getCurrentPage:function(){
var currentPage = parseInt(this.opts.currentPage); >if (isNaN(currentPage)) return 1;
return
},
hasPrev:function(){
return this.getCurrentPage() > 🎜>hasNext:function(){
return this.getCurrentPage() < this.numPages();
}
};
})(jQuery);


分页模板pagination.xml：




复制代码

<_AJAX_>

<_PAGE_ id="ページネーション">

• 
  首页
  首页
  


• 
  上一页
  上一页
  

#pageNumFrag#

• 
  下一页
  次の页
  


• 
  末页
  末页
  




]]>

@charset "utf-8";
/* CSS Document */
/* public */
ul li,ol li,dt,dd {list-style:none;}
a:link{
color:# 000000;
テキスト装飾:なし;
}
a:visited{
color:#000000;
テキスト装飾:なし;
}
a:hover{
color:#000000;
テキスト装飾:下線;
}
/* ページネーション */
.panelBar{
margin-top:12px;
高さ:26px;
行の高さ:26px;
}
.panelBar ul{
float:left;
}
.panelBar ul li{
float:left;
}
.disabled{
パディング:0 6px;
}
.j-num{
パディング:0 4px;
}
.pages
{
margin-top:12px;
浮動小数点:左;
}
.pagination
{
float:left;
パディング左:50px;
}
.pagination li, .pagination li.hover {padding:0 0 0 5px;}
.pagination a, .pagination li.hover a, .pagination li span { float:left;表示:ブロック;パディング:0 5px 0 0;テキスト装飾:なし;行の高さ:23px;背景位置:100% -150px;}
.pagination li.selected a{color:red; font-weight:bold;}
.pagination スパン、.pagination li.hover スパン { float:left;表示:ブロック;高さ:23ピクセル;行の高さ:23px;カーソル:ポインタ;}
.pagination li .first スパン、.panelBar li .previous spadding {padding:0 0 0 10px;}
.pagination li .next span、.panelBar li .last scan {padding:0 10px 0 0;}
.pagination li .first spa {background:url(images/pagination/pagination_first_a.gif) left 5px no-repeat;}
.pagination li .previous spa {background:url(images/) pagination/pagination_previous_a.gif) left 5px no-repeat;}
.pagination li .next spa {background:url(images/pagination/pagination_next_a.gif) right 5px no-repeat;}
.pagination li .lastスパン {background:url(images/pagination/pagination_last_a.gif) right 5px no-repeat;}
.pagination li .last { margin-right:5px;}
.pagination li.disabled {background:none; }
.pagination li.disabled スパン、.grid .pagination li.disabled a {background-position:0 100px;カーソル:デフォルト;}
.pagination li.disabled スパン スパン { color:#666;}
.pagination li.disabled .first スパン { 背景:url(images/pagination/pagination_first_span.gif) left 5px no-繰り返し;}
.pagination li.disabled .previous spa {background:url(images/pagination/pagination_previous_span.gif) left 5px no-repeat;}
.pagination li.disabled .next spa {background:url( image/pagination/pagination_next_span.gif) right 5px no-repeat;}
.pagination li.disabled .last spa {background:url(images/pagination/pagination_last_span.gif) right 5px no-repeat;}
。ページネーション li.disabled .last { margin-right:5px;}
.pagination li.jumpto { パディング:2px 2px 0 7px;背景位置:0 -200px;}
.pagination li.jumpto .jumptotext { float:left;幅:30ピクセル;高さ:15ピクセル;パディング:1px;境界線の色:#aceaf;背景:#ffffff; border:1px Solid #9999cc;}
.pagination li.jumpto .goto { float:left;表示:ブロック;オーバーフロー:非表示;幅:16ピクセル;高さ:19ピクセル;境界線:0;テキストインデント:-1000px;背景:url(images/pagination/pagination_goto.gif) 繰り返しなし;カーソル:ポインタ;}

$( function(){
$("div.pagination").each(function () {
var $this = $(this);
$this.pagination({
totalCount: $this .attr("totalCount")、
numPerPage: $this.attr("numPerPage")、
pageNumShown: $this.attr("pageNumShown")、
currentPage: $ this.attr("currentPage ")
});
});

function PageBreak(args) {
alert(args["pageNum"]||args["numPerPage"]); >
ここでは、js を使用して現在の totalCount numPerPage pageNumShown を取得し、ページ上でフィルタリングできます。フォーム値は ajax とともにバックエンド ページに送信され、返されたデータが受信され、指定されたページにロードされます。 location.