jquery-easyui中为datagrid加入分页功能

jquery-easyui中使用datagrid来加载远程数据，必须设置url属性，如下所示：

<table id="tt"></table>

 

$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:600,
    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，这样，在表格下方将显示分页工具栏。分页工具栏将向服务器发送二个参数：

• page: 页号，从1计起。
• rows: 每页记录大小。

后台数据使用etmvc框架编写，首先定义数据模型：

@Table(name="item")
public class Item extends ActiveRecordBase{
    @Id public String itemid;
    @Column public String productid;
    @Column public java.math.BigDecimal listprice;
    @Column public java.math.BigDecimal unitcost;
    @Column public String attr1;
    @Column public String status;
}

编写控制器代码：

public class DataController extends ApplicationController{
    /**
     * get item data
     * @param page page index
     * @param rows rows per page
     * @return JSON format string
     * @throws Exception
     */
    public View getItems(int page, int rows) throws Exception{
        long total = Item.count(Item.class, null, null);
        List<Item> items = Item.findAll(Item.class, null, null, null, rows, (page-1)*rows);
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("total", total);
        result.put("rows", items);
        return new JsonView(result);
    }
}

部署运行程序，将会输出datagrid部件：

 

 

原文及范例下载地址：http://jquery-easyui.wikidot.com/tutorial:datagrid2

 

评论

26 楼 firehold 2013-05-20  

    var pager = $('#tt').datagrid('getPager'); 
                pager.pagination({
。。。。
｝）

这样的写法不知道为什么没有效果

我现在正在做动态列和分页的功能，
单独的做起来还挺快的，一起做的话，发现这俩放一起很让人头痛额，
在下新手，请教下楼主有没什么好建议。
如果楼主有不错的demo  方便的话发给我一份 [e-mail]

25 楼 xzl0428 2010-08-11  

请问除了json以为，还有其他方式设置吗？例如设置pageSize或者total

24 楼 stworthy 2010-06-28  

<div class="quote_title">zlx19900228 写道</div>
<div class="quote_div">感觉框架适应性不强，用struts2添加分页功能后就会出现参数Input错误，希望楼主讲解下这么在datagrid中定义分页函数</div>
<p> </p>
<p>分页时会向后台传送page（第几页）,rows（每页记录数）参数，后台接收到这二个参数后查询数据，然后返回类似下面的JSON数据：</p>
<p>｛“total":0,"rows":[]}</p>
<p> </p>

23 楼 stworthy 2010-06-28  

<div class="quote_title">cwx714 写道</div>
<div class="quote_div">datagrid的pagination:true设置了以后，怎么调用它自己pagination的onSelectPage事件来查询上下页？</div>
<p> </p>
<p>获取分页栏后，为分页栏添加需要的回调函数，例如：</p>
<pre name="code" class="js">var pager = $('#tt').datagrid('getPager');
pager.pagination({
onBeforeRefresh:function(){
...
},
onSelectPage:function(){
...
}
});</pre>
 

22 楼 zlx19900228 2010-06-28  

感觉框架适应性不强，用struts2添加分页功能后就会出现参数Input错误，希望楼主讲解下这么在datagrid中定义分页函数

21 楼 cwx714 2010-04-24  

datagrid的pagination:true设置了以后，怎么调用它自己pagination的onSelectPage事件来查询上下页？

20 楼 JesseyHu 2010-04-21  

非常感谢楼主。太好了。正为此困惑。还以为是pageNumber,pageSize.

19 楼 kenchen0805 2010-03-09  

能否导出excel 或者pdf 文件

18 楼 stworthy 2010-02-10  

不清楚你使用的是什么布局，如果使用EASYUI的LAYOUT布局是可以通过设置FIT达到自适当大小的目的。

17 楼 bh_nesta 2010-02-09  

1、我设置了fit:true，首次加载这个页面时，宽度是刚好，但是高度却没了，数据显示不出来了；
2、我们页面布局，一般都是分左右两边，菜单在左边，右边是主显示区（如列表数据），当我改变左边的宽度时，我想右边的列表数据也能自动调整宽度。

不知道我表达清楚没有？？

16 楼 stworthy 2010-02-09  

bh_nesta 写道

请问怎么自适应宽度呢？宽度和高度能不能设置为100%

如果是想让DATAGRID自动占满其父容器的高度和宽度，可以设置fit="true"，如：
$('#tt').datagrid({
fit:true,
...
});

15 楼 bh_nesta 2010-02-09  

请问怎么自适应宽度呢？宽度和高度能不能设置为100%

14 楼 vinsonlou 2010-02-05  

翻页的时候，加载数据有延迟。。。感觉像性能问题

13 楼 bcw104 2010-02-04  

刚才看了一下demo，原来还可以做多层表头。
只是不知道对表格的编辑操作实现了没？

12 楼 bcw104 2010-02-04  

前台怎么知道当前页为第几页的？
只有一个total和rows能计算吗？

11 楼 stworthy 2010-02-04  

只有onClickRow事件，没有onClickCell事件。

10 楼 Cindy_Lee 2010-02-04  

jquery-easyui 能不能获得单个单元格信息？ 而不是一整行

9 楼 j9dai 2010-02-04  

看起来不错
但怎么编译布署啊
我的环境是jdk6+eclipse3.2+myeclipse6.5+jboss4.2
导入项目报错:
Target runtime Apache Tomcat v6.0 is not defined.
怎么解决啊？

8 楼 hb315 2010-02-04  

jquery-easyui 感觉很不错，如果能和extjs那样，整合再一起，就好了，用jquery挺好，但没人给进一步的整合，每一个控件都得自己整合，太零散了，不适合快速开放，楼主水平很高，如果jquery-easyui能进一步完善，感觉比你的 etmvc框架，更能推广好！

关注etmvc好久了！

7 楼 yhjhoo 2010-02-04  

呵呵，好像跟jquery ui很像吗