jquery分頁插件jquery.pagination.js實現無刷新分頁

2019-11-20 10:18:14

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了jquery分頁插件實現無刷新分頁的相關代碼，供大家參考，具體內容如下

1.使用插件為 jquery.pagination.js ，如果沒有這個js文件的話，我可以給發個。

首先引用 jquery.pagination.js （分頁js），跟pagination.css（分頁樣式css）。

點擊獲取查看這兩個文件

2.頁面js代碼為

<script type="text/javascript">    var pageIndex = 0;  //頁面索引初始值    var pageSize = 15;  //每頁顯示條數初始化，修改顯示條數，修改這里即可    $(function () {    InitTable(0); //Load事件，初始化表格數據，頁面索引為0（第一頁）    //分頁，PageCount是總條目數，這是必選參數，其它參數都是可選    $("#Pagination").pagination(<%=pcount%>, {     callback: PageCallback, //PageCallback() 為翻頁調用次函數。      prev_text: "« 上一頁",     next_text: "下一頁 »",     items_per_page:pageSize,     num_edge_entries: 2,  //兩側首尾分頁條目數      num_display_entries: 6, //連續分頁主體部分分頁條目數      current_page: pageIndex, //當前頁索引    });    //翻頁調用     function PageCallback(index, jq) {         InitTable(index);     }     //請求數據     function InitTable(pageIndex) {              $.ajax({       type: "POST",       dataType: "text",       url: 'http://www.cnblogs.com/tool/Reserver/ManageBuyBatchManage.ashx',  //提交到一般處理程序請求數據       data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,   //提交兩個參數：pageIndex(頁面索引)，pageSize(顯示條數)           success: function(data) {       $("#Result tr:gt(0)").remove();  //移除Id為Result的表格里的行，從第二行開始（這里根據頁面布局不同頁變）        $("#Result").append(data);    //將返回的數據追加到表格       }      });     }   }); </script>

3.頁面<body>里面的代碼為

 <table width="100%" border="0" cellspacing="0" cellpadding="0">   <tr>    <td width="60" align="right">商品名：</td>    <td width="200" align="left"><input type="text" id="txtKeywords" class="keyword" /></td>    <td width="200" align="left"><input id="search" type="button" value=" 查 找 " class="submit" /></td>    <td > </td>   </tr>  </table>  <table id="Result" cellspacing="0" cellpadding="0">       <tr>      <th>商品編號</th>     <th>商品名稱</th>    </tr>                          </table>   <div id="Pagination" class="right flickr"></div>

4.頁面后臺代碼為

  protected int pcount = 0;   //總條數  protected void Page_Load(object sender, EventArgs e)  {   if (!IsPostBack)   {    BLL.TbGoods bll = new BLL.TbGoods();    pcount = bll.GetRecordCount("Status='" + (int)Enum.RecordStatus.Normal + "'"); //獲取頁面總條數，即要現實的數據總條數，還不明白的話，就是select count（*）from Table ，就是這里的個數。   }  }

5.一般處理程序fffff.ashx代碼為

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;using System.Data;namespace EShop.Web.Admin.tool.Reserver{ /// <summary> /// ListBuyBatchManage 的摘要說明 /// </summary> public class ListBuyBatchManage : IHttpHandler {  public void ProcessRequest(HttpContext context)  {   context.Response.ContentType = "text/plain";   String str = string.Empty;      if (context.Request["pageIndex"] != null && context.Request["pageIndex"].ToString().Length > 0)   {    int pageIndex; //具體的頁面數    int.TryParse(context.Request["pageIndex"], out pageIndex);    if(context.Request["pageSize"]!=null&&context.Request["pageSize"].ToString().Length > 0)    {    //頁面顯示條數     int size = Convert.ToInt32(context.Request["pageSize"]);    string data= BindSource(size,pageIndex);        context.Response.Write(data);    context.Response.End();    }   }     }    #region 無刷新分頁  public string BindSource(int pagesize,int page)  {    BLL.TbGoods bll=new BLL.TbGoods();   DataSet ds = bll.GetListByPage("Status='" + (int)Enum.RecordStatus.Normal + "'", "", pagesize * page + 1, pagesize * (page + 1)); //獲取數據源的ds會吧。   StringBuilder sb = new StringBuilder();   if (ds!=null)   {    foreach (DataRow row in ds.Tables[0].Rows)    {     sb.Append("<tr><td>");     sb.Append(row["GoodsUid"]);     sb.Append("</td><td>");     sb.Append(row["GoodsName"]);     sb.Append("</td></tr>");    }   }   return sb.ToString();  }  #endregion  public bool IsReusable  {   get   {    return false;   }  } }}

6.效果圖