本帖子已过去太久远了，不再提供回复功能。jquery easyui datagrid 分页 详解
我的图书馆
jquery easyui datagrid 分页 详解
由于项目原因，用了jquery easyui 感觉界面不错，皮肤样式少点，可是官网最近打不开了，资料比较少，给的demo没有想要的效果，今天在用datagrid 做分页显示的时候，折腾了半天，网上的资料也比较少，后自己动手，终于解决，废话不说，开始：datagrid分页 有一个附加的分页控件，只需后台获取分页控件自动提交的两个参数rows每页显示的记录数和//当前第几页然后读取相应页数的记录，和总记录数total一块返回即可 界面如下：1、下边是datagrid的显示对话框，我直接用table把列头显示出来，感觉比用js写要易于阅读12345678910111213141516&table id="list_data"&cellspacing="0"&cellpadding="0"&& &&&&&thead&& &&&&&&&&&tr&& &&&&&&&&&&&&&th field="fldAppDept"&width="100"&部门&/th&& &&&&&&&&&&&&&th field="fldAppNode"&width="100"&网站&/th&& &&&&&&&&&&&&&th field="fldAppName"&width="100"&名称&/th&& &&&&&&&&&&&&&th field="fldAppMgr"&width="100"&管理员&/th&& &&&&&&&&&&&&&th field="fldAppNote"&width="100"&注释&/th&& &&&&&&&&&&&&&th field="fldAppType"&width="100"&类型&/th&& &&&&&&&&&&&&&th field="fldTelphone"&width="100"&电话&/th&& &&&&&&&&&&&&&th field="fldAppImg"&width="100"&职务&/th&& &&&&&&&&&&&&&th field="fldAppMonitor"&width="100"&启用监测&/th&& &&&&&&&&&&&&&th field="fldAppLevel"&width="100"&要重级别&/th&& &&&&&&&&&/tr&& &&&&&/thead&& &/table&& 2、js代码，用于构建datagrid注意 要想显示分页控件，pagination属性必须为true1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556&&&&$('#list_data').datagrid({& &&&&&&&&title:'应用系统列表',& &&&&&&&&iconCls:'icon-edit',&&&&&&&&width: 700,& &&&&&&&&height: 'auto',& &&&&&&&&nowrap: false,& &&&&&&&&striped: true,& &&&&&&&&border: true,& &&&&&&&&collapsible:false,&&&&&&&&fit: true,&&&&&&&&url:'listApp.action',& &&&&&&&&&&&&&&&&&&&&&&&&remoteSort:false,&& &&&&&&&&idField:'fldId',& &&&&&&&&singleSelect:false,&&&&&&&&pagination:true,&&&&&&&&rownumbers:true,&&&&&&&&frozenColumns:[[& &&&&&&&&&&&&{field:'ck',checkbox:true}& &&&&&&&&]],& &&&&&&&&toolbar: [{& &&&&&&&&&&&&text: '添加',& &&&&&&&&&&&&iconCls: 'icon-add',& &&&&&&&&&&&&handler: function() {& &&&&&&&&&&&&&&&&openDialog("add_dialog","add");& &&&&&&&&&&&&}& &&&&&&&&}, '-', {& &&&&&&&&&&&&text: '修改',& &&&&&&&&&&&&iconCls: 'icon-edit',& &&&&&&&&&&&&handler: function() {& &&&&&&&&&&&&&&&&openDialog("add_dialog","edit");& &&&&&&&&&&&&}& &&&&&&&&}, '-',{& &&&&&&&&&&&&text: '删除',& &&&&&&&&&&&&iconCls: 'icon-remove',& &&&&&&&&&&&&handler: function(){& &&&&&&&&&&&&&&&&delAppInfo();& &&&&&&&&&&&&}& &&&&&&&&}],& &&&&});& &&&&&&&&var&p = $('#list_data').datagrid('getPager');& &&&&$(p).pagination({& &&&&&&&&pageSize: 10,&&&&&&&&pageList: [5,10,15],&&&&&&&&beforePageText: '第',&&&&&&&&afterPageText: '页&&& 共 {pages} 页',& &&&&&&&&displayMsg: '当前显示 {from} - {to} 条记录&& 共 {total} 条记录',& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&});& 3、后台我是通过struts2处理的数据 返回json串private&JSONO&&&&&&&&&&&private&S&&&&&&&&&&&private&S&&&&&&&&&&&private&AppServiceInter appS& &&&&&&&public&JSONObject getResult() {& &&&&&&&&return&& &&&&}& &&&&public&void&setResult(JSONObject result) {& &&&&&&&&this.result =& &&&&}& &&&&public&void&setAppService(AppServiceInter appService) {& &&&&&&&&this.appService = appS& &&&&}& &&&&&&&&&&&public&String getRows() {& &&&&&&&&return&& &&&&}& &&&&public&void&setRows(String rows) {& &&&&&&&&this.rows =& &&&&}& &&&&public&String getPage() {& &&&&&&&&return&& &&&&}& &&&&public&void&setPage(String page) {& &&&&&&&&this.page =& &&&&}& &&&&&&&&/** &&&&&* 查询应用系统 &&&&&* @return &&&&&*/&&&&&public&String listApp() {& &&&&&&&&System.out.println("---------------");& &&&&&&&&&&&&&&&&int&intPage = Integer.parseInt((page == null&|| page == "0") ? "1":page);& &&&&&&&&&&&&&&&&int&number = Integer.parseInt((rows == null&|| rows == "0") ? "10":rows);& &&&&&&&&&&&&&&&&int&start = (intPage-1)*& &&&&&&&&&&&&&&&&&&&List&TblApp& list = appService.findByPageApp(start,number);&&&&&&&&&&&&Map&String, Object& jsonMap = new&HashMap&String, Object&();&&&&&&&&&&&&jsonMap.put("total", appService.getCountApp());&&&&&&&&&&&&jsonMap.put("rows", list);&&&&&&&&&&&&result = JSONObject.fromObject(jsonMap);&&&&&&&&&&&&&&&&&&&&&&&&&&&return&SUCCESS;& &&&&}& 4、附上struts.xml配置文件&package name="app" extends="json-default"&
&action name="listApp" class="appAction" method="listApp"&
&result type="json"&
&param name="root"&result&/param&
&/package&
特写出这些，方便自己或他人以后参考 ，如果有什么问题大家可以留言......
发表评论：
TA的最新馆藏[转]&jqueryeasyui中分页问题 - ITeye问答
我用的是editable datagrid,这里边的分页要自己去实现，我后台可以得到当前页和行数，所以分页没什么问题，只是我不知道在哪里获取它点击下一页的这个事件，也就是说我不知道它在哪里设置当点击下一页的时候，去调用我后台分页的函数获得json？
代码：
$(function(){
&&&&&&&&&&& var lastI
&&&&&&&&&&& $('#tt').datagrid({
&&&&&&&&&&&&&&& title:'用户管理',
&&&&&&&&&&&&&&& iconCls:'icon-edit',
&&&&&&&&&&&&&&& width:800,
&&&&&&&&&&&&&&& height:400,
&&&&&&&&&&&&&&& singleSelect:false,
&&&&&&&&&&&&&&& idField:'itemid',
&&&&&&&&&&&&&&& url:'jsonsw!json.action',
&&&&&&&&&&&&&&& pagination:true,
&&&&&&&&&&&&&&& checkbox:true,
&&&&&&&&&&&&&&& columns:[[
&&&&&&&&&&&&&&&&&&& {field:'t_user_id',checkbox:true,align:'center'},
&&&&&&&&&&&&&&&&&&& {field:'login_name',title:'用户名',width:180,align:'center'},
&&&&&&&&&&&&&&&&&&& {field:'name',title:'姓名',width:100,align:'center'},
&&&&&&&&&&&&&&&&&&& {field:'sex',title:'性别',width:80,align:'center'},
&&&&&&&&&&&&&&&&&&& {field:'cdate',title:'创建日期',width:100,align:'center'},
&&&&&&&&&&&&&&&&&&& {field:'p_name',title:'所属部门',width:150},
&&&&&&&&&&&&&&&&&&& {field:'state',title:'状态',width:60,align:'center'
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& ]],
&&&&&&&&&&&&&&& toolbar:[{
&&&&&&&&&&&&&&&&&&& text:'append',
&&&&&&&&&&&&&&&&&&& iconCls:'icon-add',
&&&&&&&&&&&&&&&&&&& handler:function(){
&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('endEdit', lastIndex);
&&&&&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('appendRow',{
&&&&&&&&&&&&&&&&&&&&&&&&&&& itemid:'',
&&&&&&&&&&&&&&&&&&&&&&&&&&& productid:'',
&&&&&&&&&&&&&&&&&&&&&&&&&&& listprice:'',
&&&&&&&&&&&&&&&&&&&&&&&&&&& unitprice:'',
&&&&&&&&&&&&&&&&&&&&&&&&&&& attr1:'',
&&&&&&&&&&&&&&&&&&&&&&&&&&& status:'P'
&&&&&&&&&&&&&&&&&&&&&&& });
&&&&&&&&&&&&&&&&&&&&&&& var lastIndex = $('#tt').datagrid('getRows').length-1;
&&&&&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('beginEdit', lastIndex);
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& },'-',{
&&&&&&&&&&&&&&&&&&& text:'delete',
&&&&&&&&&&&&&&&&&&& iconCls:'icon-remove',
&&&&&&&&&&&&&&&&&&& handler:function(){
&&&&&&&&&&&&&&&&&&&&&&& var row = $('#tt').datagrid('getSelected');
&&&&&&&&&&&&&&&&&&&&&&& if (row){
&&&&&&&&&&&&&&&&&&&&&&&&&&& var index = $('#tt').datagrid('getRowIndex', row);
&&&&&&&&&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('deleteRow', index);
&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& },'-',{
&&&&&&&&&&&&&&&&&&& text:'accept',
&&&&&&&&&&&&&&&&&&& iconCls:'icon-save',
&&&&&&&&&&&&&&&&&&& handler:function(){
&&&&&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('acceptChanges');
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& },'-',{
&&&&&&&&&&&&&&&&&&& text:'reject',
&&&&&&&&&&&&&&&&&&& iconCls:'icon-undo',
&&&&&&&&&&&&&&&&&&& handler:function(){
&&&&&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('rejectChanges');
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& },'-',{
&&&&&&&&&&&&&&&&&&& text:'getChanges',
&&&&&&&&&&&&&&&&&&& iconCls:'icon-search',
&&&&&&&&&&&&&&&&&&& handler:function(){
&&&&&&&&&&&&&&&&&&&&&&& var rows = $('#tt').datagrid('getChanges');
&&&&&&&&&&&&&&&&&&&&&&& alert('changed rows: ' + rows.length + ' lines');
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& }],
&&&&&&&&&&&&&&& onBeforeLoad:function(){
&&&&&&&&&&&&&&&&&&& $(this).datagrid('rejectChanges');
&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&& onClickRow:function(rowIndex){
&&&&&&&&&&&&&&&&&&& alert("ss");
&&&&&&&&&&&&&&&&&&& if (lastIndex != rowIndex){
&&&&&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('endEdit', lastIndex);
&&&&&&&&&&&&&&&&&&&&&&& $('#tt').datagrid('beginEdit', rowIndex);
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&& lastIndex = rowI
&&&&&&&&&&&&&&& }
&&&&&&&&&&& });
&&&&&&& });
问题补充：cuiran 写道
jquery-easyui中使用datagrid来加载远程数据，必须设置url属性，如下所示：
$('#ts').datagrid({
title:'Load Data',
iconCls:'icon-save',
width:400,
height:250,
url:'/demo3/data/getItems',
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
pagination:true
分页时需要设置pagination:true，这样，在表格下方将显示分页工具栏。分页工具栏将向服务器发送二个参数：
opage: 页号，从1计起。
orows: 每页记录大小。
然后在后台定义数据模型。希望对你有所启发。
不要抄，OK不？你看清楚我在问什么了吗？我问的不是显示出分页，我问的是点下一页的时候怎么进我后台的方法，要这个点击下一页的事件。
采纳的答案
easyui里面默认会向后台传递page和rows 这2个参数，你可以直接从request中获取。然后获取当前数目。就好控制分页了。示例：
Struts的action方法：
public String data() throws Exception {
Map&String, Object& params = new HashMap&String, Object&();
userPage = userService.findByPage(params, page, rows);
Map map = new HashMap();
map.put("total", userPage.getTotalRows());
map.put("rows", userPage.getResultList());
Struts2Utils.renderJson(map);
grid = $('#user-table').datagrid({
url:'upc/user!data.action',
pagination:true,
jquery easyui 中会有page和rows两个参数，这两个属性代表 当前页码和每页记录数。
而且jquery easyui是通过 ajax传递数据的，自动会将 page和rows两个参数代入的，即在提交数据时，你写的格式是：
url:'jsonsw!json.action',
事实上，他和传递着 例如｛page:1,rows:10,sortName:'',sortOrder:''｝等等参数。
这样讲你应该就明白了，它是以request的parameter传递到后台，你只需要获取就行了，如果你用的是struts2，那么定义两个参数 如楼上的：
引用private int page = 1;&&
private int rows = 10;
会自动获取的，并且还有一点，就是你根本就不用把page和rows返回到客户端，客户端会自动计算。
action中要有变量和其get/set方法：
private int page = 1;
private int rows = 10;
jquery-easyui中使用datagrid来加载远程数据，必须设置url属性，如下所示：
$('#ts').datagrid({
title:'Load Data',
iconCls:'icon-save',
width:400,
height:250,
url:'/demo3/data/getItems',
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
pagination:true
分页时需要设置pagination:true，这样，在表格下方将显示分页工具栏。分页工具栏将向服务器发送二个参数：
opage: 页号，从1计起。
orows: 每页记录大小。
然后在后台定义数据模型。希望对你有所启发。
已解决问题
未解决问题jquery easyui datagrid 分页（转） - Hi, Sun - ITeye技术网站
博客分类：
上午没事抽空做了一个datagrid的入门例子，是结合struts2做的，刚下班了，也闲着没事，就datagrid的再做进一步的开发；进行分页
另外本人有一个习惯，拒绝转载或者抄袭他人的东西.此外，事例源码尽量完整，哪怕最简单的代码也要写的清楚
先看效果：
虽然说是入门的例子，但本人尽量做的详细点，以后会继续更新，部分功能
此外，为了后继easyui的学习，做了一个简单的框架：后台采用hibernate2.5+struts2开发：数据库用mysql。红色代码标记注意。
model层的数据
package org.easyui.
import java.util.D
public class Student {
private String classN
public char getSex() {
public void setSex(char sex) {
this.sex =
public int getAge() {
public void setAge(int age) {
this.age =
public Date getBirthday() {
public void setBirthday(Date birthday) {
this.birthday =
public int getId() {
public void setId(int id) {
public String getName() {
public String getClassName() {
return classN
public void setName(String name) {
this.name =
public void setClassName(String className) {
this.className = classN
DAO数据库访问层
接口EasyDao：
package org.easyui.
import java.util.L
import org.easyui.model.S
public interface EasyDao {
public List&Student& getStudent(int page,int rows);
public int getTotalPages(int rows);
接口实现类EasyDaoImpl：
package org.easyui.
import java.util.L
import org.easyui.model.S
import org.easyui.util.UtilH
import org.hibernate.HibernateE
import org.hibernate.S
public class EasyDaoImpl implements EasyDao {
@SuppressWarnings("unchecked")
public List&Student& getStudent(int page, int rows) {
List&Student& list =
Session session = UtilHibernate.getSession();
session.beginTransaction();
String sql = "from Student";
list = session.createQuery(sql)
.setFirstResult((page-1)*rows)
.setMaxResults(rows)
session.getTransaction().commit();
} catch (HibernateException e) {
session.getTransaction().rollback();
e.printStackTrace();
UtilHibernate.closeSession(session);
public int getTotalPages() {
Session session = UtilHibernate.getSession();
int total = 0;
session.beginTransaction();
String sql = "select count(*) from Student";
int count = (Integer)session.createQuery(sql).uniqueResult();
session.getTransaction().commit();
} catch (HibernateException e) {
session.getTransaction().rollback();
e.printStackTrace();
UtilHibernate.closeSession(session);
EasyuiAction1 代码如下
package org.
import java.util.ArrayL
import java.util.HashM
import java.util.L
import java.util.M
import javax.servlet.http.HttpServletR
import org.apache.struts2.interceptor.ServletRequestA
import org.easyui.dao.EasyD
import org.easyui.dao.EasyDaoI
import org.easyui.model.S
import com.opensymphony.xwork2.ActionS
public class EasyuiAction1 extends ActionSupport implements ServletRequestAware{
private static final long serialVersionUID = 1L;
HttpServletR
private List&Object&
public int getTotal() {
public List&Object& getRows() {
public void setTotal(int total) {
this.total =
public void setRows(List&Object& rows) {
this.rows =
public String execute() throws Exception {
int page =Integer.parseInt(request.getParameter("page"));
int row = Integer.parseInt(request.getParameter("rows"));//接受参数page和rows
EasyDao dao = new EasyDaoImpl();
//实例化dao
this.total = dao.getTotalPages();
this.rows = new ArrayList&Object&();
List&Student& list = dao.getStudent(page, row);//分页，将数据保存到list中
for(int i=0;i&list.size();i++){
Student student
= list.get(i);
//最原始循环方法到到student对象
Map&String,Object& map = new HashMap&String,Object&();
map.put("id", student.getId());
//以键值对的形式保存到map中
map.put("sex", student.getSex());
map.put("name",student.getName());
map.put("age", student.getAge());
map.put("birthday", student.getBirthday());
map.put("className", student.getClassName());
this.rows.add(map);
//循环保存map到list对象this.rows中
System.out.println(request.getParameter("page"));
System.out.println(request.getParameter("rows"));
return SUCCESS;
public void setServletRequest(HttpServletRequest request) {
this.request =
struts.xml配置如下：
&?xml version="1.0" encoding="UTF-8" ?&
&!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "
&package name="jsonDemo" extends="json-default"&
&action name="easyAction" class="org.easyui.EasyuiAction1"&
&result type="json"/&
&/package&
easyDemo1.jsp页面代码如下:
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&base href="&%=basePath%&"&
&title&easyDemo1.jsp&/title&
&link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"&
&link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"&
&script type="text/javascript" src="jquery-easyui/jquery-1.4.2.min.js"&&/script&
&script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"&&/script&
&script type="text/javascript" src="jslib/easyDemo.js"&&/script&
&script type="text/javascript"&
$(function(){
$('#tt').datagrid({
title:'datagrid小例子',
iconCls:'icon-ok',
width:500,
height:320,
pageSize:5,
pageList:[5,10,15,20],
nowrap:false,
striped: true,
collapsible:true,
url:'easyAction.action'
loadMsg:'数据装载中......',
sortName:'code',
sortOrder:'desc',
remoteSort:false,
frozenColumns:[[
{field:'ck',checkbox:true}
columns:[[
{title:'学号',field:'id',width:'50',rowspan:2,align:'center'},
{title:'姓名',field:'name',width:'60',rowspan:2,align:'center'},
{title:'性别',field:'sex',width:'50',rowspan:2,align:'center'},
{title:'年龄',field:'age',width:'50',rowspan:2,align:'center'},
{title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'},
{title:'班级',field:'className',width:'100',rowspan:2,align:'center'}
pagination:true,
rownumbers:true
$('#tt').datagrid('getPager').pagination({
displayMsg:'当前显示从{from}到{to}共{total}记录',
onBeforeRefresh:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
//$('#tt').datagrid({url:'easyAction.action'});
&a href="javascript:void(0)" onclick="verify()" class="easyui-linkbutton"&测试josn数据&/a&
&h2&&b&测试easyui的DataGrid&/b&&/h2&
&table id="tt"&
easyDemo.js代码如下:
function verify(){
//创建XMLHttpRequest对象
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}else if(window.ActiveXObject){
var activerxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i&activerxName.i++){
xmlhttp = new ActiveXObject(activerxName[i]);
}catch(e){
//确认XMLHttpRequest对象是否创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
xmlhttp.onreadystatechange =
xmlhttp.open("POST","easyAction.action?page=1&rows=5","true");
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send();
function callback(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
var oBook = eval('(' + xmlhttp.responseText + ')');
$.messager.alert('test jsonData',xmlhttp.responseText);
如有不懂的，可以留言或者加我q：.喜欢和大家分享与学习!!!
数据库操作(easyui)：
工作区截图;
浏览: 1484967 次
来自: 杭州
java实现操作word中的表格内容，用插件实现的话，可以试试 ...
Maven多模块spring + springMVC + JP ...
博主还有wlsvm.zip这个压缩包吗？链接打不开了
f604a33a817e427posts - 200,&
comments - 24,&
trackbacks - 0
easyui datagrid 前台分页的实现java采用的版本
使用easyui分页，有后台服务器端实现和前台浏览器端实现。服务器端实现按规定的格式返回数据就可以了，前台实现需要写js来实现。
代码如下：
关键代码：
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 = pageN
&&&&&&&&&&&&&&&&&&&opts.pageSize = pageS
&&&&&&&&&&&&&&&&&&&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
完整的Demo
&!DOCTYPE html&
&&&&&meta charset="UTF-8"&
&&&&&title&客户端分页demo&/title&
&&&&&link rel="stylesheet" type="text/css" href="/easyui/themes/bootstrap/easyui.css"&
&&&&&link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"&
&&&&&link rel="stylesheet" type="text/css" href="/easyui/demo/demo.css"&
&&&&&script type="text/javascript" src="/easyui/jquery-1.8.0.min.js"&&/script&
&&&&&script type="text/javascript" src="/easyui/jquery.easyui.min.js"&&/script&
&&&&&h2&客户端分页dem&/h2&
&&&&&div class="demo-info"&
&&&&&&&&&div class="demo-tip icon-tip"&&/div&
&&&&&&&&&div&&/div&
&&&&&/div&
&&&&&div style="margin:10px 0;"&&/div&
&&&&&table id="dg" title="Client Side Pagination" style="width:700height:300px" data-options="
&&&&&&&&&&&&&&&&rownumbers:true,
&&&&&&&&&&&&&&&&singleSelect:true,
&&&&&&&&&&&&&&&&autoRowHeight:false,
&&&&&&&&&&&&&&&&pagination:true,
&&&&&&&&&&&&&&&&pageSize:10"&
&&&&&&&&&thead&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&th field="inv" width="80"&Inv No&/th&
&&&&&&&&&&&&&&&&&th field="date" width="100"&Date&/th&
&&&&&&&&&&&&&&&&&th field="name" width="80"&Name&/th&
&&&&&&&&&&&&&&&&&th field="amount" width="80" align="right"&Amount&/th&
&&&&&&&&&&&&&&&&&th field="price" width="80" align="right"&Price&/th&
&&&&&&&&&&&&&&&&&th field="cost" width="100" align="right"&Cost&/th&
&&&&&&&&&&&&&&&&&th field="note" width="110"&Note&/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));
&&&&&&&&&&&&
&&&&&&&&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 = pageN
&&&&&&&&&&&&&&&&&&&&opts.pageSize = pageS
&&&&&&&&&&&&&&&&&&&&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));
&&&&&&&&&&&&
&&&&&&&&$(function(){//加载数据
&&&&&&&&&&&&$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
&&&&&&&&});
&&&&&/script&
阅读(...) 评论()