jquery easyUI ajax加载数据分页功能

今天自己搞框架，分享一些封装ajax请求数据，封装分页代码的一些代码心得。

页面先引入easyUI的基础样式和js文件

<link rel="stylesheet" href="${pubPath}/easyui/themes/icon.css" type="text/css">
<link rel="stylesheet" href="${pubPath}/easyui/themes/default/easyui.css" type="text/css">
<link rel="stylesheet" href="${pubPath}/easyui/demo/demo.css" type="text/css">
<script type="text/javascript" src="${pubPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pubPath}/easyui/jquery.easyui.min.js"></script>

路径自己修改

然后定义自己的table

<table id="dataGrid" class="easyui-datagrid" title="文件基本信息"  data-options="rownumbers:true,
singleSelect:true,
autoRowHeight:true,
pagination:true,
pageSize:10,fit:false">
<thead>
            <tr>
                <th field="filename" width="200" align="center">文件名</th>
                <th field="filesize" width="200" align="center">大小</th>
                <th field="filetype" width="200" align="center">类型</th>
                <th field="fileperson" width="200" align="center">创建人</th>
                <th field="filedate" width="200" align="center">创建时间</th>
                <th field="filedown" width="200" align="center">下载次数</th>
                <th field="filelabel" width="200" align="center">文件标签</th>
                <th field="filepath" width="200" align="center">文件路径</th>
            </tr>
        </thead>
</table>

这里页面差不多写完了。开始写js，把全部代码粘上来吧，也不是很多。供大家参考

$(function() {
Search();
});
function pagerFilter(data){
debugger;
if (typeof data.pageListdata.length == 'number' && typeof data.pageListdata.splice == 'function'){// is array
data = {
total: data.pageListdata.length,
rows: data.pageListdata
}
}
var dg = $('#dataGrid');
var opts = dg.datagrid('options');
var pager = $('#dataGrid').datagrid('getPager');
$(pager).pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
$('#dataGrid').datagrid('loadData',data);
},
beforePageText : '第', //页数文本框前显示的汉字           
afterPageText : '页    共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录'
});
if (!data.pageListdata){
data.pageListdata = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.pageListdata.slice(start, end));
return data; 
}


function Search() {
//pageNumber为datagrid的当前页码
var page_Number = $('#dataGrid').datagrid('options').pageNumber;
//pageSize为datagrid的每页记录条数
var page_Size = $('#dataGrid').datagrid('options').pageSize;
var path = $("#fromGrid").attr("action");
$.ajax({
url : path,
type : "post",
data : {
pageNumber : page_Number,
pageSize : page_Size
},
dataType : "json",
success : function(datas) {
$('#dataGrid').datagrid({loadFilter:pagerFilter}).datagrid('loadData',datas);
}
});
}