JQuery Easy-UI 实现动态分页

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 + "&currentPageNumber=" + 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)