EasyUI - pagination 分页组件
总页数是手动填写,后续进行更改………………
效果:
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 分页组件的更多相关文章
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- Vue 2.0 pagination分页组件
最近写了一个分页组件,效果如下图: f-pagination.js文件 Vue.component('f-pagination',{ template:'<div class="fPa ...
- [转载]EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- EasyUI Pagination 分页
通过 $.fn.pagination.defaults 重写默认的 defaults. 分页(pagination)允许用户通过翻页导航数据.它支持页面导航和页面长度选择的可配置选项.用户可以在分页的 ...
- angular实现简单的pagination分页组件
不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...
- EasyUI Pagination 分页分页布局定义 显示按钮布局
//分页布局定义.该属性自版本 1.3.5 起可用.//布局项目包括一个或多个下列值://1.list:页面尺寸列表.//2.sep:页面按钮分割.//3.first:第一个按钮.//4.prev:前 ...
- easyUI pagination分页控件点击下一页后跳转到最后一页
easyui-pagination点击下一页直接跳转到最后一页的可能原因 今天做到聊天记录展示页面的时候发现一个bug:初次进入页面加载出第一页的数据,点击下一页的时候不是到第二页而是到最后一页. 如 ...
随机推荐
- 谷歌三大核心技术(二)Google MapReduce中文版
谷歌三大核心技术(二)Google MapReduce中文版 Google MapReduce中文版 译者: alex 摘要 MapReduce是一个编程模型,也是一个处理和生成超大数据 ...
- fedora 下安装 文泉驿正黑体
1. 可以到文泉驿正黑体的 主页 http://wenq.org/wqy2/index.cgi?%E9%A6%96%E9%A1%B5 最好能去官网表示一下支持 2. 也可以直接使用命令 : sudo ...
- 十句话教你学会Linux数据流重定向
1.看到重定向一下子就想起了web里面的redirect,没错,但是Linux数据流重定向的作用不是跳到另一个网页,而是用来存储重要的屏幕信息.将不必要的屏幕信息输出到文件里或者“黑洞”里.将错误信息 ...
- 递推,大数存储E - Order Count
Description If we connect 3 numbers with "<" and "=", there are 13 cases: 1) ...
- 内联函数 inline
(一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int ...
- rotatelogs分割apache日志文件
rotatelogs 截断日志,进行配置.但是保存httpd.conf 之后,服务器报错: 日志文件: piped log program ' /usr/sbin/rotatelogs logs/py ...
- POJ 1041 John's trip 无向图的【欧拉回路】路径输出
欧拉回路第一题TVT 本题的一个小技巧在于: [建立一个存放点与边关系的邻接矩阵] 1.先判断是否存在欧拉路径 无向图: 欧拉回路:连通 + 所有定点的度为偶数 欧拉路径:连通 + 除源点和终点外都为 ...
- 【集训笔记】母函数【母函数模板】【HDOJ1028【HDOJ1085
以下资料摘自 http://www.cnblogs.com/wally/archive/2012/07/13/hdu1028_1085_1171_.html 生成函数是说,构造这么一个多项式函数g(x ...
- HapiJS开发手冊
HapiJS开发手冊 作者:chszs.转载需注明.博客主页:http://blog.csdn.net/chszs 一.HapiJS介绍 HapiJS是一个开源的.基于Node.js的应用框架,它适用 ...
- QQ音乐产品经理黄楚雄:产品与用户的情感联系
QQ 音乐产品经理关于产品的一些感悟. 2014 年是 QQ 音乐的第十个产品年度,这十年我们跟用户一起见证了整个互联网音乐的发展.2011 年的 3 月 QQ 音乐公布了第一个 iPhone 平台的 ...