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 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
Vue组件通信实践记录(推荐)
Aug 15 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 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
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python获取当前时间的方法
2014/01/14 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python实现TCP文件传输
2020/03/20 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
热门专业求职信
2014/05/24 职场文书
公司辞职信模板
2015/05/13 职场文书