JQuery Ajax 非リフレッシュページングの例 code_jquery

まずレンダリングを見てみましょう:

実装原理は非常にシンプルで、ページ番号がクリックされるたびに非同期でサーバーにアクセスし、ページのデータを取得します。 1. データベースのテーブル構造: 非常にシンプルで、フィールドは 4 つだけです。 News_id News_title News_time News_readtimes

2. フロントページのコード:

コードをコピーします コードは次のとおりです: JQuery の更新ページングなし js" type="text/javascript"> > $("#Pagination").pagination( , { コールバック: PageCallback, prev_text : 'Previous page', next_text: 'Next Page', items_per_page: pageSize, num_display_entries: 6,//連続ページングのメイン部分のページング エントリの数 current_page: pageIndex, //現在のページのインデックス num_edge_entries: 2//両側の先頭と末尾のページング エントリ数 }); // ページ呼び出し呼び出し Function PageCallback ( INDEX、JQ) { Inittable (INDEX) }

// データをリクエスト Function Inittable (PageIndex) { $ .ajax ({ Type: "Post", Datatype: "Text", URL: 'Ajax/ / PagerHandler.ashx', data: "pageIndex=" (pageIndex 1) "&pageSize=" pageSize, success: function(data) { $("#Result tr:gt(0)") .remove ();//Result の ID を持つテーブルの行を 2 行目から削除します (ページはページ レイアウトに従ってここで変更されます) 返されたデータをテーブルに追加します ;

コードをコピー コードは次のとおりです: 枠線: 実線 1 ピクセル #85A8BE;幅:60%"> & lt;/th & gt; & lt; th スタイル = "幅: 20%" & gt; 更新時間 & lt; ;/tr> , ページの背景ファイル

ここでの主な目的は、レコードの総数を取得することです:

コードをコピー

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

public string pageCount = string.Empty;//エントリの総数 protected void Page_Load(object sender, EventArgs e) {

if (!IsPostBack) { pageCount = new News().GetNewsCount(); } } 4 つ目は、ajax ハンドラーです: PagerHandler.ashx コードをコピーします

コードは次のようになります: public class PagerHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; 文字列 str = string.Empty; int pageIndex = Convert.ToInt32(context.Request["pageIndex"]); int size = Convert.ToInt32(context.Request["pageSize"]); if (pageIndex == 0) { pageIndex = 1; } int count = 0;

ニュース n = new News(); リスト list = n.GetNewsList(pageIndex, size, ref count); StringBuilder sb = new StringBuilder(); foreach (リスト内のニュース p) { sb. Append(" ; "); sb.Append(p.News_id); sb.Append(" "); sb.Append(" sb.Append(" "); sb.Append(p. News_time); sb.Append(" "); sb.Append(p.News_readtimes); sb.Append(" "); } str = sb.ToString(); context.Response.Write(str); } public bool IsReusable { get { return false; } } }

JQuery Ajax 非リフレッシュ ページングの例 code_jquery

JQuery Ajax 非リフレッシュページングの例 code_jquery