pemalam jquery paging jquery.pagination.js melaksanakan paging_jquery tanpa muat semula

Contoh dalam artikel ini berkongsi dengan anda kod pemalam paging jquery yang berkaitan untuk mencapai paging tanpa muat semula untuk rujukan anda. Kandungan khusus adalah seperti berikut

1. Gunakan pemalam jquery.pagination.js Jika anda tidak mempunyai fail js ini, saya boleh menghantarnya kepada anda.

Petikan pertama jquery.pagination.js (penomboran js), diikuti oleh penomboran.css (gaya penomboran css).

Klik untuk melihat dua fail ini

2. Kod js halaman ialah

<script type="text/javascript"> 

   var pageIndex = 0;  //页面索引初始值 
   var pageSize = 15;  //每页显示条数初始化，修改显示条数，修改这里即可 
   $(function () {
    InitTable(0); //Load事件，初始化表格数据，页面索引为0（第一页）
    //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
    $("#Pagination").pagination(<%=pcount%>, {
     callback: PageCallback, //PageCallback() 为翻页调用次函数。
      prev_text: "&laquo; 上一页",
     next_text: "下一页 &raquo;",
     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. Kod dalam halaman6c04bd5ca3fcae76e30b72ad730ca86d

 <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. Kod latar belakang halaman ialah

  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. Kod pengendali am fffff.ashx ialah

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. Memaparkan

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.