<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>客户端分页demo</title> <%@include file="base.jsp"%> </head> <body> <h2>客户端分页Demo</h2> <table id="dg" title="Client Side Pagination" style="width:100%" data-options=" rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, pageSize:10"> <thead> <tr> <th field="inv" width="20%">姓名</th> <th field="date" width="20%">年龄</th> <th field="name" width="20%">性别</th> <th field="amount" width="10%" align="right">班级</th> <th field="price" width="10%" align="right">学号</th> <th field="cost" width="10%" align="right">其他</th> <th field="note" width="10%">备注</th> </tr> </thead> </table> <script> function getData(){//模拟数据 var rows = []; for(var i=1; i<=80000; i++){ var amount = Math.floor(Math.random()*1000); var price = Math.floor(Math.random()*1000); rows.push({ inv: 'Inv No '+i, date: $.fn.datebox.defaults.formatter(new Date()), name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } //console.log(JSON.stringify(rows)); return rows; } function pagerFilter(data){ if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组 data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.datagrid('loadData',data); } }); if (!data.originalRows){ data.originalRows = (data.rows); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } $(function(){//加载数据 $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData()); }); </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Dialog - jQuery EasyUI Demo</title> <%@include file="base.jsp"%> <script type="text/javascript"> // 表格数据源 var data = []; // 用代码造30条数据 for (var i = 1; i < 31; ++i) { data.push({ "id":i, "name":"Student" + i }) } $(function () { $("#dd").datagrid({ title:"测试本地分页", rownumbers:true, fitColumns:true, pagination:true, data:data.slice(0,10), columns:[ [ {field:'id', align:"center", title:"编号",width:100}, {field:'name', align:"center", title:"姓名",width:100} ] ] }); var pager = $("#dd").datagrid("getPager"); pager.pagination({ total:data.length, onSelectPage:function (pageNo, pageSize) { var start = (pageNo - 1) * pageSize; var end = start + pageSize; $("#dd").datagrid("loadData", data.slice(start, end)); pager.pagination('refresh', { total:data.length, pageNumber:pageNo }); } }); }); </script> </head> <body> <div id="dd"></div> </body> </html>
相关推荐
EasyUI分页,编辑
是用java和easyUI的一个分页例子 ,可以给刚刚接触easyUi的朋友们看看,高手请绕行
easyui分页展示,增删改等操作的一个典型例子。
asp.net + EasyUI 分页代码. 包含数据库 .net三层结构
jquery easyUI 分页问题文档
asp.net mvc easyui 分页操作 采用Entityframework
easyui分页方法
ssm项目案例 以及easyui分页功能实现 ssm项目案例 以及easyui分页功能实现
spring mvc 注解 easyui 分页
springmvc+mybatis+easyUI 实现前台页面分页的功能,,,
easyui分页技术,很实用,绝对是你想要的资源,自己辛苦的成果
.net 使用easyUI_DataGrid分页 列操作
通过easyui 中的控件实现分页 效果
springboot+mybatis+easyui增删改查分页Demo,sql采用xml方式
easyUI实现分页功能,采用ajax发送请求,loadData把数据传入list表格内。
easyui分页插件,分页插件传递查询参数,和返回之后执行的方法
一个简单的系统,页面是用easyUI做的,连接数据库,分页显示数据