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

ページネーションは、ほとんどすべての外部プログラムにとって不可欠なものであり、Web フォームの時代には、多くの人が AspNetPager ユーザー コントロールを使用してきた理由は、実際には、いくつかのパラメーターを渡すだけで適切なページネーションを生成できるためです。実際、これはほとんどのプログラマー (私を含む) の致命的な欠点でもあります。スタイル...、私たちの場合、モジュールの見栄えを良くするために CSS を使用するのに費やされる時間は、関数の実装に必要な時間をはるかに超えています。 -!
現在、ますます多くの Web 開発者が .NET MVC フレームワークを採用し始めており、すべてのサーバー制御を脇に置いて、本格的な B/S プログラミングに戻りつつありますが、柔軟な制御のメリットを享受できることに加えて、多大な労力も必要になります。ページングなどを実装するには、多くのことを自分で行う必要があります。確かに関数を単純に実装するのは非常に簡単ですが、使いやすく、多機能で、パフォーマンスが良く、変更が容易であることは簡単ではありません。そのため、jquery pager などのさまざまな JS ページング コントロールが登場します。 jquery ページネーションなどを呼び出すと非常に便利ですが、生成効果も非常に優れています。唯一の欠点は、データが数千、数百、数千万ある場合は少ない方が良いということです。データが不足すると致命的になります。呼び出しやすく、サーバーサイドのページングと連携できるフロントエンド コントロールがあれば素晴らしいですね:)
ここまで述べたので、リッチ クライアントを使用してそれを分離して変換する方法を説明しましょう。 UI フレームワーク (DWZ) JS ページング コントロールが表示されます。まずレンダリングを見てください:

ページ コード:

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

<div class="panelBar">
<div class="pages"> ;span>Display</span>
@Html.DropDownList("numPerPage", ViewBag.dNumPerPage as SelectList, new { onchange = "PageBreak({numPerPage:this.value})" })
<span> ; アイテム、合計 @Model.TotalCount アイテム
</div>
<div class="pagination" totalcount="@Model.TotalCount" numperpage="@Model.NumPerPage"
pagenumshown="@Model.PageNumShown " currentpage="@Model.CurrentPage">
</div>

実際、これは次のように HtmlHelper 呼び出しとして記述できます。 as Html.Pagination(ViewBag.dNumPerPage,Model.TotalCount,Model .NumPerPage,Model.PageNumShown,Model.CurrentPage)
このように、1 つのステートメントで十分です。
原則は、js を使用して、class="pagination" で div のカスタム属性を取得することです。合計ページ数 TotalCount、ページあたりの NumPerPage アイテムの数、表示されるページ番号の数 PageNumShown、および現在のページnumber CurrentPage,
次に、これら 4 つの属性をページング js に渡します。これらの主要な属性はページング js で使用されて計算が実行され、事前に作成されたページング テンプレートがページング効果を示すために置き換えられます。
アーティストがプロジェクトの全体的なスタイルに従ってページングを調整し、適切な分業と協力の原則を達成できるようにするために、ここでのページングの JS と CSS はページング置換テンプレートから完全に分離されています。 CSS を見たときにプログラムが混乱することがなくなり、アーティストが JS をぼんやりと見るようになります。
ページネーション js は 2 つの部分に分かれており、1 つはパラメーターに基づいてページネーションを計算する部分 (pagination.js) であり、もう 1 つは準備作業を行う部分 (core.js) です。実際には、いくつかのパラメーターは事前に作成されています。ここには、ページング テンプレートと、ページング内で使用されるいくつかのカスタム拡張関数が 1 つだけあり、アーティストによる変更と観察の便宜を図るためのものであり、js には混合されていませんが、js にも便利です。ここでは XML 形式 (pagination.xml) を使用します。まず、コードを投稿します
core.js:

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

(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:'<li class="#liClass#"><a href="#">#pageNum#</a></li>'
};
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：




复制代码

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<_AJAX_>

<_PAGE_ id="ページネーション"><![CDATA[
<ul>
<li class="j-first">
<a class="first" href="#"><span>首页</span></a>
<span class="first"><span>首页</span></span>
</li>
<li class="j-prev">
<a class="previous" href="#"><span>上一页</span></a>
<span class="previous"><span>上一页</span></span>
</li>
#pageNumFrag#
<li class="j-next">
<a class="next" href="#"><span>下一页</span></a>
<span class="next"><span>次の页</span></span>
</li>
<li class="j-last">
<a class="last" href="#"><span>末页</span></a>
<span class="last"><span>末页</span></span>
</li>
<li class="jumpto"><input class="jumptotext" type="text" value="#currentPage#" /><input class="goto" type="button" value ="确定" /></li>

]]></_PAGE_>
</_AJAX_>

pagination.css：

复制代代码如下:

@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) 繰り返しなし;カーソル:ポインタ;}

私も CSS を読むときに頭が痛くなりました。これを友人に書いてもらって自分で変更しました。
使い方について話しましょう:
まず、独自のページング テンプレート DWZ.init( "js/ pagination.xml"); 次に、ページネーションを呼び出します:

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

$( 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 ")
});
});

なぜここで $("div.pagination" を使用しないのでしょうか) ).pagination( {}) については、ユーザーは操作を容易にするためにリストの上下に配置することをよく考えているはずです。実際、これら 2 つの js は別のファイルに配置できます。ページング ファイル参照を使用するだけで済みます。実際に使用されるのは、Web とサーバーが交換するデータである totalCount numPerPage pageNumShown currentPage だけであるためです。使用。変更する必要のないものがすべて完了したので、インタラクションを実装する方法は非常に簡単です。ページ番号をクリックするか、各ページでドロップダウン ボックスの表示を選択するか、[実行] ボタンをクリックすると、カスタム関数 PageBreak が表示されます。この関数内で、達成したいことが正確にわかります。たとえば、

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

function PageBreak(args) {
alert(args["pageNum"]||args["numPerPage"]); >
ここでは、js を使用して現在の totalCount numPerPage pageNumShown を取得し、ページ上でフィルタリングできます。フォーム値は ajax とともにバックエンド ページに送信され、返されたデータが受信され、指定されたページにロードされます。 location. <div class="pagination" > のカスタム属性を再割り当てしてから、pagination メソッドを呼び出すことに注意してください。質問があれば、メッセージを残してください。何人がそれを使用しているかわからない場合は、将来 2 つの使用法を書く予定です。1 つはこの div に直接データを返す方法で、もう 1 つは単に The を返す方法です。フォーム内の行データと div の 4 つのカスタム属性は、js によって動的に割り当てられます。