哪个网站做生鲜配送,什么是搭建网站,企业网站seo优化公司,上海注册公司能落户上海吗下面直接给你最实用、最常见的添加分页组件#xff08;pagination#xff09;方法#xff0c;jQuery EasyUI datagrid 自带超级好用的分页器#xff0c;开启后自动处理分页、每页条数、跳转、刷新等#xff0c;复制粘贴就能用#xff0c;领导最爱的“专业报表分页”效果全…下面直接给你最实用、最常见的添加分页组件pagination方法jQuery EasyUI datagrid 自带超级好用的分页器开启后自动处理分页、每页条数、跳转、刷新等复制粘贴就能用领导最爱的“专业报表分页”效果全都有方法1最简单最常用 - 开启内置分页组件推荐现在就用这个3秒出效果tableiddgclasseasyui-datagridtitle带分页的数据网格stylewidth:900px;height:500pxdata-optionsurl:get_data.php, !-- 后台接口返回 {total:总数, rows:[当前页数据]} -- fitColumns:true, singleSelect:false, rownumbers:true, pagination:true, !-- 关键开启分页 -- pageSize:20, !-- 默认每页20条 -- pageList:[10,20,50,100] !-- 可选每页条数下拉列表 --theadtrthdata-optionsfield:ck,checkbox:true/ththdata-optionsfield:id,width:80ID/ththdata-optionsfield:name,width:150姓名/ththdata-optionsfield:age,width:80年龄/ththdata-optionsfield:email,width:200邮箱/ththdata-optionsfield:regdate,width:120注册日期/th/tr/thead/table后台接口必须返回的标准 EasyUI JSON 格式get_data.php 示例?php$pageisset($_GET[page])?intval($_GET[page]):1;$rowsisset($_GET[rows])?intval($_GET[rows]):20;$start($page-1)*$rows;// 模拟数据实际从数据库查询$total358;// 总记录数$dataarray();for($i$start;$i$start$rows$i$total;$i){$data[]array(id$i1,name用户.($i1),agerand(18,60),emailuser.($i1).example.com,regdatedate(Y-m-d,strtotime(-.($i%30). days)));}echojson_encode(array(total$total,rows$data));?效果表格底部自动出现分页栏显示“第 1/18 页 共 358 条”支持首页/上一页/下一页/尾页、跳转页码、每页条数选择、刷新按钮方法2自定义分页栏外观和按钮更专业$(function(){varpager$(#dg).datagrid(getPager);// 获取分页器对象pager.pagination({pageSize:20,pageList:[10,20,50,100,200],displayMsg:当前显示 {from} 到 {to} 条共 {total} 条记录,// 自定义提示文字layout:[list,sep,first,prev,sep,manual,sep,next,last,sep,refresh,info],// 自定义按钮顺序showPageList:true,// 显示每页条数下拉showRefresh:true,// 显示刷新按钮beforePageText:第,// 页码文本框前提示文字afterPageText:页 共 {pages} 页,buttons:[{// 在分页栏右边添加自定义按钮iconCls:icon-excel,text:导出Excel,handler:function(){alert(导出当前页数据到Excel);// location.href export.php?page pager.pagination(options).pageNumber;}},{iconCls:icon-print,text:打印,handler:function(){window.print();}}]});});方法3分页栏放在顶部或上下都有$(#dg).datagrid({pagination:true,pagePosition:top// top 顶部 bottom 底部默认 both 上下都有});方法4分页时保持选中状态批量操作神器varselectedRows[];// 全局保存选中行$(#dg).datagrid({onCheck:function(index,row){selectedRows.push(row);},onUncheck:function(index,row){selectedRowsselectedRows.filter(function(r){returnr.id!row.id;});},onCheckAll:function(rows){selectedRowsselectedRows.concat(rows);},onUncheckAll:function(){// 根据当前页数据过滤},onLoadSuccess:function(data){// 加载新页时高亮之前选中的行$.each(selectedRows,function(i,row){varindex$(this).datagrid(getRowIndex,row);if(index!-1){$(this).datagrid(checkRow,index);}});}});你现在直接复制方法1的代码准备好一个返回{total:?, rows:[]}的接口刷新页面就能看到完美分页效果了结合之前的复选框 行内编辑 页脚摘要 子网格你的后台数据表格已经完全专业级了。想要我给你一个完整的HTML示例带远程分页 自定义分页栏 导出按钮 跨页保持选中或者你告诉我你的接口返回格式比如已经是 {data:[], count:}我2分钟帮你改写加载逻辑复制就能跑快说说你现在的需求我手把手帮你搞定5分钟内看到超级专业的分页组件