jquery 페이징 플러그인 jquery.pagination.js는 새로 고침이 필요 없는 paging_jquery를 구현합니다.

이 기사의 예는 참조용으로 새로 고침 없는 페이징을 달성하기 위한 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: "&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. 페이지의 코드는

입니다.

 <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. 렌더링

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.