Easy-UI 通过datagrid函数实现分页:ajax传递pagesize与pagenumber给服务器,服务器根据请求参数查出一页数据,并通过JSON格式返回到页面,datagrid函数自动对JSON数据解析展示,请注意JSON格式一定要正确。
jquery-easyui/themes/default/easyui.css
jquery-easyui/themes/icon.css
jquery-easyui/jquery-1.6.min.js
jquery-easyui/jquery.easyui.min.js
jquery-easyui/jquery.json-2.4.js
jquery-easyui/json2.js
//使用datagrid实现动态分页
$(function(){
$('#dg').datagrid({
title: '信息列表',
width: 'auto',
height: 600,
nowrap: true,
striped: true,
collapsible:true,
border: true,
showFooter:true,
pagination:true,
rownumbers:false,
fitColumns:false,
pageSize:10,
pageList:[10,15,20,25,30,35,40,45,50,100],
sortName:'flightCode',
frozenColumns:[[
{field:'ck',checkbox:true},
{field:'code',title:'航班号',width:80,hidden:true,sortable:true}
]],
columns:[[
{field:'name',title:'名称',width:80,hidden:true},
//注意formatter函数可以对显示值进行格式化处理,比如日期显示格式,函数自定义。
{field:'col4',title:'日期',hidden:true,width:120,formatter: function(value,row,index){return;}}
]],
onDblClickRow: function(index,value){
$('#dg').datagrid('selectRow',index);
},
onClickCell: function(index,field,value){
},
});
var p = $('#dg').datagrid('getPager');
$(p).pagination({
onSelectPage: function (pageNumber, pageSize) {
getData(pageNumber, pageSize);
},
onChangePageSize:function (pageNumber, pageSize) {
getData(pageNumber, pageSize);
},
onRefresh:function (pageNumber, pageSize) {
getData(pageNumber, pageSize);
}
});
});
var getData = function (pasenumber,pagesize) {
$.ajax({
type: 'POST',
url: queryPaginationURL, //用户请求数据的URL
data: "currentPageSize=" + pagesize + "¤tPageNumber=" + pasenumber,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
},
success: function (data) {
$('#dg').datagrid('loadData', data);
}
});
};
//页面初始化时调用函数加载数据
$(function(){
getData(1,10);
});
function refreshPage(){
getData(1, 10);
};
<table id="dg" class="easyui-datagrid" toolbar="#toolbar" singleSelect="true"> </table>
JSON数据格式
{
"total":239,
"rows":[
{"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},
{"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},
]
}
分享到:
相关推荐
JQuery Easy-UI DataGrid性能调优文档,欢迎喜欢的朋友下载学习!
jquery easy-ui的整体文件包,包括树,表单,表格等等,有demo,可以看相关demo后自己导入到项目用。
基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jquery-easy-ui-1.3.2
包括jQuery的chm格式说明文档,demo压缩包。jQuery easy-ui的chm格式说明文档。
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jQuery-ui-tabs 分页相关 jQuery-ui-tabs 分页相关
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
jquery-easy-ui 各种demo 例如tree,
easy-ui jQuery富客户端框架 AJAX框架 。
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
jquery-ui.css、jquery-ui.js
jquery插件jquery-ui-1.8.18.custom.min.js
很好用的jquery-easy-ui demo
jquery-ui-1.8.18.custom
jquery easy-ui 自定义皮肤,有了这个你就不要再美工了
jquery-ui-1.9.2.custom.min.js
jquery-ui-1.7.3.custom JQUERY UI