查看了一边EasyUI 官网对于分页功能的编写,刚开始使用easyui时发现其中有很多自己不理解的地方,还好帮我们做了很多函数的封装,供我们直接调用就可以了,更好的使用在网页中,对于新手更是很好理解。便于操作和更改,下面我们对于分页做一次详细的解剖,在工作中遇到各种坑,发现一套完整的功能讲解,并献上代码,以供各位指正。
1,第一步通过标记创建分页(pagination)data-options里面的内容可参考官网的API根据需要添加。
2.第二步使用 javascript 创建分页(pagination)。
$(function($) {getPager_DataGrid('recordDatagrid');//获取table分页的id
initDataTables(1,10,"y");});//页面进入就执行//回调函数
3.第三步使用 处理ajax请求回来的数据操作如下。
4.第四步使用,这里从ajax传回的数据处理完之后,页面显示的分页此时是英文显示,我们还需要做一步处理,easyui已经帮我们做好了封装的函数,这一步直接粘贴复制就可以了,对应好table的id的名字。
function getPager_DataGrid(datagridID){//这里我们要对照第二步的函数名一致 var p = $('#'+datagridID+'').datagrid('getPager'); $(p).pagination({ pageSize:10, pageList:[10,30,50], beforePageText:'第', afterPageText:'页 共{pages}页', displayMsg:'当前显示{from} - {to}条记录 共{total}条记录', onSelectPage:function(pageNumber, pageSize){ initDataTables(pageNumber, pageSize, "n");//我们回调函数,通过ajax请求,返回参数 } }); }