今日は、リフレッシュフリーのページング、ページングスタイルの表示におけるjQueryのページネーションの主な役割の使用、およびリフレッシュフリーまたはAjaxの使用の主な原則を達成するためにjQueryのページネーションプラグインの簡単な使用で主に見て。テンプレートプラグインの組み合わせをjQueryノーリフレッシュページングを達成するために、私はあなたにいくつかの助けを与えることを願っています。
まず、jQueryファイル、jQueryページネーションファイルとjQuery Templatesファイルを紹介し、多くの人々がjQuery Templatesに慣れていないかもしれませんが、あなたは見ることができます。この2つの記事をください。
<script type="text/javascript" src="http://..com/ajax/libs/jquery/..4/..js"></script>
<script src="http://..com/js/..js" type="text/javascript"></script>
<script src="http://..com/js/..js" type="text/javascript"></script>
次に、データ項目とページングスタイルの表示にそれぞれ使用されるHTMLマークアップを、次のように見てみましょう：
<!--リストを表示する>
<div id="content-left"></div>
<!--ページネーションのスタイル表示>
<div id="Pagination" class="pagination"></div>
<!--jQuery Templates-->
<script id="Template" type="text/html">
<div class="item">
<h3><a href="${Url}" target="_blank">${Title}</a></h3>
<p>${Subject}</p>
</div>
</script>
次に、必要なデータを取得する必要があります、あなたが最初の2つのjQueryテンプレートの記事を読んでいる場合は、データバインディングのためのjavascriptオブジェクトに戻る必要があることに気づくでしょう、ここで、またはJSONを返します。主に次のJSON構造の最終的なリターンのコロケーションの形で：
var req={
"articlelist":
[
{"Title":"記事タイトル1","Url":"記事のURL1","Subject":"記事の概要1"},
{"Title":"記事タイトル2","Url":"記事URL2","Subject":"記事の概要2"},
{"Title":"記事タイトル3","Url":"記事URL3","Subject":"記事の要約3"}
]
};
JSONを学ぶために新しい友人の多くを容易にするために、ここで少し背景出力JSON C＃コードを与えるために、次のとおりです：
if (dt != null && dt.Rows.Count > 0)
{
StringBuilder strResult = new StringBuilder();
strResult.Append("{"articlelist":[");
foreach (DataRow dr in dt.Rows)
{
strResult.Append("{"Title":"" + dr["Title"].ToString() + "",");
strResult.Append(""Url":"" + dr["Url"].ToString() + "",");
strResult.Append(""Subject":"" + dr["Subject"].ToString() + ""},");
}
//末尾の ','
strResult.Remove(strResult.Length - 1, 1);
strResult.Append("]}");
//jsonを出力する
Response.Write(strResult.ToString());
Response.End();
}
$(document).ready(function () {
//TotalNum ここにデッド
var TotalNum = 200;
//最初に読み込む
pageselectCallback(0);
//ページネーションのイベント
$("#Pagination").pagination(200, {
prev_text: "前の記事 ",
next_text: "次へ",
num_edge_entries: 2,
num_display_entries: 8,
//
callback: pageselectCallback
});
function pageselectCallback(page) {
var result = "";
$.ajax({
type: "post",
dataType: "json",
url: "getdata.aspx", //リクエストURL
data: { "page": parseInt(page + 1) },
success: function (req) {
//使用微软jQuery Templates绑定数据列表,实现了HTML与js分离,使得页面整洁
$("#content-left").html($("#Template").render(req.articlelist));
}
});
}
});
このように、非リフレッシュページ分割を実現するためにjQueryのページ分割の使用は、テキストはあまりjQueryのページ分割を紹介しませんが、jQuery Templatesの使用に焦点を当てます。jQueryのページネーションはまだまだ使いやすいと思いますので、最終的な効果はデモをご覧ください。
