转easyui datagrid 前台分页的实现.docx

转 easyuidatagrid 前台分页的实现 使用 easyui 分页，有后台服务器端实现和前台浏览器端实现。服务器端实现按规定的格式返回数据就可以了，前台实现需要写js 来实现。 代码如下： 关键代码： functionpagerFilter(data){ if (typeofdata.length == number typeofdata.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; } 完整的 Demo !DOCTYPE html html head 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 /head body 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:700px;height:300px data-options= rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, pageSize:10 thead tr th field=inv width=80Inv No/th th field=date width=100Date/th th field=name width=80Name/th th field=amount width=80 align=rightAmount/th th field=price width=80 align=rightPrice/th th field=cost width=100 align=rightCost/th th field=note width=110Note/th /tr /thead /table script function getData(){//模拟数据var rows = []; for(vari=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.