jQuery易用户界面数据网格实现本地分页的方法

本文实例讲述了jQuery易用户界面数据网格实现本地分页的方法。分享给大家供大家参考。具体如下：

一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。

这里重点用到了页码的监听，以及射流研究…数组的薄片方法来完成。代码如下：

！DOCTYPE html html head meta charset=' utf-8 '/title/title link href=' js/jquery-measuri-1。3 .6/主题/默认/测量。CSS ' rel='样式表/link href=' js/jquery-measuri-1。3 .6/主题/图标。CSS ' rel='样式表'/脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery-measuri-1。3 .6/表格数据源定义变量数据=[];//用代码造30条数据for(var I=1；i 31i) { data.push({ 'id':i，' name ' : ' Student ' I })} $(function(){ $(' # DD ').datagrid({ title: '测试本地分页，rownumbers:true，fitColumns:true，pagination:true，data:data.slice(0，10)，columns 3360[[{ field : ' id '，align:'center '，title: '编号，宽度：100}，{field:'name '，align:'center '，title: '姓名，宽度：100 }]]})；var pager=$('#dd ').datagrid(' GetPager ')；寻呼机。分页({总计：个数据。长度，onSelectPage:function(页码，页面大小){ var start=(页码- 1) *页面大小；var end=起始页面大小；$('#dd ').datagrid('loadData '，data.slice(start，end))；寻呼机。分页(' refresh '，{ total:data.length，页码：页码})；} });});/script/head body div id=' DD '/div/body/html运行效果如下图所示：

希望本文所述对大家的框架程序设计有所帮助。