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

效果:

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. 通过加索引对sql语句优化

    今天看数据库的时候遇到这样一个SQL语句: select substr(a.djxh,) as id, (a.nd || a.yf) DECL_YM, a.zspm_dm as LEVY_ITEM_I ...

  2. 绫致时装讲述O2O细节:野心在“私人定制” - 移动购物 - 亿邦动力网

    绫致时装讲述O2O细节:野心在"私人定制" - 移动购物 - 亿邦动力网 绫致时装讲述O2O细节:野心在"私人定制" 作者: 亿邦动力网来源: 亿邦动力网201 ...

  3. jQuery报错:Uncaught ReferenceError: $ is not defined

    在使用jQuery的时候,发现有如下报错: Uncaught ReferenceError: $ is not defined  (anonymous function) 出现这个报错的原因: 1.j ...

  4. Shell脚本运行hive语句 | hive以日期建立分区表 | linux schedule程序 | sed替换文件字符串 | shell推断hdfs文件文件夹是否存在

    #!/bin/bash source /etc/profile; ################################################## # Author: ouyang ...

  5. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  6. 安装帝国CMS遇到“修改php.ini,将:short_open_tag 设为 On”的解决方法+“建立目录不成功!请检查目录权限”问题

    想用安装个帝国CMS来做个网站,于是下载了程序,上传到服务器上,但是在输入安装路径的时候却给出了如下图示: 您的PHP配置文件php.ini配置有问题,请按下面操作即可解决: 1.修改php.ini, ...

  7. 多线程之Future模式

    详细参见葛一名老师的<Java程序性能优化> Futrue模式:对于多线程,如果线程A要等待线程B的结果,那么线程A没必要等待B,直到B有结果,可以先拿到一个未来的Future,等B有结果 ...

  8. m序列产生器

    扩频通讯中会用的到伪随机数列 —— m序列 代码中是5bit原始码 module m_generate ( clock , reset , m_code ); input clock ,reset ; ...

  9. Socket编程模式

    Socket编程模式 本文主要分析了几种Socket编程的模式.主要包括基本的阻塞Socket.非阻塞Socket.I/O多路复用.其中,阻塞和非阻塞是相对于套接字来说的,而其他的模式本质上来说是基于 ...

  10. UNIX环境高级编程——进程管理和通信(总结)

    进程管理与通信 进程的管理 进程和程序的区别: 进程: 程序的一次执行过程   动态过程,进程的状态属性会发生变化 程序:存放在磁盘上的指令.数据的有序集合  是个文件,可直观看到 程序program ...