jquery easyUI ajax加载数据分页功能

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

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







路径自己修改

然后定义自己的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);
}
});
}


你可能感兴趣的:(jquery插件,js)