总页数是手动填写,后续进行更改………………

效果:

html代码:

<!--使用标签创建-->
<%--<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background: #efefef; border: 1px solid #ccc;"></div>--%> <!--用来显示数据-->
<div id="p" title="显示数据" style="width: 602px; height: 200px; padding: 10px; background: #ffffff; border: 1px solid #ccc;"></div>
<!--使用js创建-->
<div id="pp" style="background: #efefef; border: 1px solid #ccc; width: 600px;"></div>

JavaScript代码:

$(function () {
//panel组建,用来显示分页数据
$('#p').panel({
title: '显示数据',
href: '../Json/Pagination_Josn.ashx?page=1&pageSize=10',
}); //分页组建
$('#pp').pagination({
total: ,//总条数
pageSize: ,//每一页显示多少条
pageNumber: ,//刚开始创建时候,显示第几页数据
pageList: [, , , , ],//每一页显示多少条 //按钮组
buttons: [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
alert("add");
}
}, {
text: '删除',
iconCls: 'icon-cancel',
handler: function () {
alert("delete");
}
}], //指定显示的图标,比如说前一页,后一页,刷新等等
//layout:['first', 'last'], //showPageList: false,//是否显示【每一页显示条数】
//showRefresh: false,//是否显示刷新按钮 beforePageText: '第',
afterPageText: '共计{pages}页',
displayMsg: '第{from}到{to}页,总计{total}条数据', //选择一个新页面时候触发,使用上一页,下一页
onSelectPage: function (pageNumber, PageSize) {
$('#p').panel('refresh', '../Json/Pagination_Josn.ashx?page='+pageNumber+'&pageSize='+PageSize+'');
}
})
})

HttpHandler(一般处理程序):

using System.Web;

namespace EasyUI.Json
{
/// <summary>
/// Pagination_Josn 的摘要说明
/// </summary>
public class Pagination_Josn : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html"; //接受传递来的参数:第几页,每页显示几条
string page = context.Request.QueryString["page"].ToString();
string pageSize = context.Request.QueryString["pageSize"].ToString(); //数据库操作: //根据传递来的参数,可以在此实现数据库操作。
//将数据库返回的数据,格式化为html数据,传给页面,形成分页的结果。
//此例子没有使用数据库,直接返回的是,传递来的参数略加格式化的html数据。 //返回传递来的数据
context.Response.Write("页数:[" + page + "]<br/><br/>每页条数:[" + pageSize + "]"); } public bool IsReusable
{
get
{
return false;
}
}
}
}

EasyUI - pagination 分页组件的更多相关文章

  1. 第二百零九节,jQuery EasyUI,Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  2. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. Vue 2.0 pagination分页组件

    最近写了一个分页组件,效果如下图: f-pagination.js文件 Vue.component('f-pagination',{ template:'<div class="fPa ...

  4. [转载]EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  5. EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  6. EasyUI Pagination 分页

    通过 $.fn.pagination.defaults 重写默认的 defaults. 分页(pagination)允许用户通过翻页导航数据.它支持页面导航和页面长度选择的可配置选项.用户可以在分页的 ...

  7. angular实现简单的pagination分页组件

    不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...

  8. EasyUI Pagination 分页分页布局定义 显示按钮布局

    //分页布局定义.该属性自版本 1.3.5 起可用.//布局项目包括一个或多个下列值://1.list:页面尺寸列表.//2.sep:页面按钮分割.//3.first:第一个按钮.//4.prev:前 ...

  9. easyUI pagination分页控件点击下一页后跳转到最后一页

    easyui-pagination点击下一页直接跳转到最后一页的可能原因 今天做到聊天记录展示页面的时候发现一个bug:初次进入页面加载出第一页的数据,点击下一页的时候不是到第二页而是到最后一页. 如 ...

随机推荐

  1. chr()、unichr()和ord(),全半角转换,ValueError: unichr() arg not in range() (wide Python build)

    chr().unichr()和ord() chr()函数用一个范围在range(256)内的(就是0-255)整数作参数,返回一个对应的字符. unichr()跟它一样,只不过返回的是 Unicode ...

  2. layer 的常用属性

    layer的各种属性代码示例: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading ...

  3. Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js)

    Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) ...

  4. hadoop、spark/storm等大数据相关视频资料汇总下载

    小弟不才,工作中也用到了大数据的相关东西.一開始接触的时候,是通过买来的教学视频入的门.这两天整理了一下自己的视频资料.供各位进行下载. 文档截图:

  5. 如何快速方便的输出向量vector容器中不重复的内容

    在vector容器中,存入的内容难免会出现重复,那么如何快速输出或提前非重复的那些数据呢,即重复的数据只输出一次,直观的方法是每次输出都要通过循环比较是否已经输出过,这种方法还是比较费时的,可以利用u ...

  6. VMware Workstation9安装Mac OS X10.9系统

    链接地址:http://jingyan.baidu.com/article/aa6a2c142cef740d4c19c426.html VMware Workstation9.0安装Mac OS X1 ...

  7. iOS Development: Proper Use of initWithNibName:bundle: Affects UITableViewController

    Address:http://www.outofcore.com/2011/07/ios-development-proper-use-of-initwithnibnamebundle-affects ...

  8. BZOJ 3384: [Usaco2004 Nov]Apple Catching 接苹果( dp )

    dp dp( x , k ) = max( dp( x - 1 , k - 1 ) + *** , dp( x - 1 , k ) + *** ) *** = 0 or 1 ,根据情况 (BZOJ 1 ...

  9. Mojo 返回一维和二维数组

    这种情况不断的网数组@arr2里放入数据,返回的内容为: 这种情况是一维数组: while( $selStmt->fetch() ){ print "\$a1 is $a1\n&quo ...

  10. WM_PAINT消息小结

    WM_PAINT是Windows窗口系统中一条重要的消息,应用程序通过处理该消息实现在窗口上的绘制工作. 1. 系统何时发送WM_PAINT消息? 系统会在多个不同的时机发送WM_PAINT消息:当第 ...