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

效果:

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. Linux 静态库与共享库的使用

    申明: 正如题如示,本篇讲的是Linux下是静态库与共享库,而Window下的动态链接库详细情况可见这篇文章:windows动态链接库 DLL 浅析.虽然原理,思想差不多,但是细节却各有不同. 一.静 ...

  2. SVN基础命令手册

    SVN版本号:1.5 及更新版本号 名词说明: WC:Working Copy 你的工作区 Versioned:受控的:受版本号控制的 SVN是什么? SVN是开源的版本号控制系统. 比CVS很多其它 ...

  3. nginx源代码学习资源(不断更新)

    nginx源代码学习是一个痛苦又快乐的过程,以下列出了一些nginx的学习资源. 首先要做的当然是下载一份nginx源代码,能够从nginx官方站点下载一份最新的. 看了nginx源代码,发现这是一份 ...

  4. C++ 自定义结构体和类 内存对齐

    为什么要提出内存对齐? 比如这么一种处理器,它每次读写内存的时候都从某个8倍数的地址开始,一次读出或写入8个字节的数据,假如软件能保证double类型的数据都从8倍数地址开始,那么读或写一个doubl ...

  5. js实现无限级树形导航列表

  6. Xcode的Architectures、Valid Architectures和Build Active Architecture Only属性

    Architectures 这代表,在这个项目里你想要Xcode编译的目标设备列表. Valid Architectures 还不是太明确这个设置的意图,但是一般来说是不需要更改的,和Architec ...

  7. [Swust OJ 643]--行列式的计算(上三角行列式变换)

    题目链接:http://acm.swust.edu.cn/problem/643/ Time limit(ms): 1000 Memory limit(kb): 65535   Description ...

  8. [Swust OJ 715]--字典序问题(组合数预处理/数位dp)

    题目链接:http://acm.swust.edu.cn/problem/715/ Time limit(ms): 1000 Memory limit(kb): 65535   在数据加密和数据压缩中 ...

  9. C#路径,文件,目录,I/O常见操作

         C#路径,文件,目录,I/O常见操作 文件操作是程序中非常基础和重要的内容,而路径.文件.目录以及I/O都是在进行文件操作时的常见主题,这里想把这些常见的问题作个总结,对于每个问题,尽量提供 ...

  10. Week7(10月21日)

    Part I:提问  =========================== 1.请为下图编写视图代码,视图中表单提交后,交给当前控制器和动作处理. 2.如何实现点击列标题排序功能? 3.分页时采用了 ...