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: 400,//总条数 pageSize: 10,//每一页显示多少条 pageNumber: 1,//刚开始创建时候,显示第几页数据 pageList: [10, 20, 30, 40, 50],//每一页显示多少条 //按钮组 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; } } } }
posted on 2015-10-17 17:40 ultrastrong 阅读(506) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!