jquery分页插件jquery.pagination.js实现无刷新分页


Posted in Javascript onApril 01, 2016

本文实例为大家分享了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.效果图

jquery分页插件jquery.pagination.js实现无刷新分页

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
精通JavaScript的this关键字
May 28 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
jQuery实现下拉加载功能实例代码
Apr 01 #Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
如何在Linux上安装Node.js
Apr 01 #Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 #Javascript
You might like
延长phpmyadmin登录时间的方法
2011/02/06 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
event.srcElement+表格应用
2006/08/29 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
一步步解析Python斗牛游戏的概率
2016/02/12 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Django自定义分页效果
2017/06/27 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
详解python数据结构和算法
2019/04/18 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
浅谈Python中的模块
2020/06/10 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
法人身份证明书
2014/10/08 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
小学班级口号大全
2015/12/25 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
python使用torch随机初始化参数
2022/03/22 Python