关于easyui中datagrid分页问题--摘

Posted 2020-11-17 luoyetl

首先datagrid中的pagination属性设置为true： 如

$(‘#dg1‘).datagrid({
    url:"{:U(‘Rearlogin/ajaxNoticeAll‘)}",    //请求后台的地址
    fitColumns:true,
    scrollbarSize:0,
    singleSelect:true,
    pagination:true,     //分页开关
    pageNumber:1,        //初始页
    rownumbers: true,
    nowrap: false,
    pageSize: 10,     //每页显示条数
    pageList: [10, 20, 50, 100, 150, 200],   //每页显示条数供选项
    showFooter: true,
    striped : true,    //设置表格奇偶行颜色是否不同
    onSelect:function(rowIndex,rowData){
        $(":radio[name=‘radio_res‘][value=‘"+rowIndex+"‘]").prop("checked",true);
    },
    onUnselect:function(rowIndex,rowData){
        $(":radio[name=‘radio_res‘][value=‘"+rowIndex+"‘]").prop("checked",false);
    },
    columns:[[
        {field:‘ck‘,title:‘‘,formatter:function(value,rowData,rowIndex){
            return "<input name=‘radio_res‘ value=‘"+rowIndex+"‘ type=‘radio‘/>";
        }},
        {field:‘n_id‘,title:‘ID‘,sortable:true,width:100},
        {field:‘n_title‘,title:‘公告标题‘,sortable:true,width:100},
        {field:‘n_pubdate‘,title:‘发布时间‘,sortable:true,width:100}
    ]] ,
    toolbar:"#btn"
});

每次会自动传输 pageNum和pageSize到你写的那个URL地址      

后台接收的时候是 page // 当前页数  和 rows //每页显示数目   两个数

然后根据这两个数就可以用 mysql 中的 limit 方法 控制输出条数    还要得到数据的总条数 total   

两个数转换成 json 格式 返回给前台 就可以了。

附上后台返回：

{"total":"11","rows":[{"ID":"1","dtNumber":"ADDFSSA","dtTitle":"00","dtTheme":"演艺秀","dtFitTime":"上午","AddTime":"2014/12/15 15:26:40","operateID":"1"},{"ID":"2","dtNumber":"ADDFSSA","dtTitle":"纽约市徒步游，发现原汁原味的百老汇","dtTheme":"城市之旅","dtFitTime":"全天(白+黑)","AddTime":"2014/12/15 16:05:56","operateID":"2"}.......]} 

 

在后台返回的json中带上total这个字段,前台设计pageSize后就可以自动识别分页数据了

 

数据表格属性（DataGrid Properties）

属性继承控制面板，以下是数据表格独有的属性。

名称	类型	描述	默认值
columns	array	数据表格列配置对象，查看列属性以获取更多细节。	undefined
frozenColumns	array	跟列属性一样，但是这些列固定在左边，不会滚动。	undefined
fitColumns	boolean	设置为true将自动使列适应表格宽度以防止出现水平滚动。	false
autoRowHeight	boolean	定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。	true
toolbar	array,selector	数据表格顶部面板的工具栏。可能的值： 1）数组，每个工具选项和链接按钮相同。 2）选择显示的工具栏。 在一个<div>的标签定义工具栏: $(‘#dg‘).datagrid({ toolbar: ‘#tb‘ }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-edit‘,plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-help‘,plain:true"/a> </div> 通过数组定义工具栏: $(‘#dg‘).datagrid({ toolbar: [{ iconCls: ‘icon-edit‘, handler: function(){alert(‘edit‘)} },‘-‘,{ iconCls: ‘icon-help‘, handler: function(){alert(‘help‘)} }] });	null
striped	boolean	设置为true将交替显示行背景。	false
method	string	请求远程数据的方法类型。	post
nowrap	boolean	设置为true，当数据长度超出列宽时将会自动截取。	true
idField	string	表明该列是一个唯一列。	null
url	string	一个用以从远程站点请求数据的超链接地址。	null
loadMsg	string	当从远程站点载入数据时，显示的一条快捷信息。	Processing, please wait …
pagination	boolean	设置true将在数据表格底部显示分页工具栏。	false
rownumbers	boolean	设置为true将显示行数。	false
singleSelect	boolean	设置为true将只允许选择一行。	false
checkOnSelect	boolean	如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。 此属性是1.3版本。	true
selectOnCheck	boolean	如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。 此属性是1.3版本。	true
pagePosition	string	定义的分页栏的位置。可用的值有 ‘top‘,‘bottom‘,‘both‘。 此属性是可自1.3版本。	bottom
pageNumber	number	当设置分页属性时，初始化分页码。	1
pageSize	number	当设置分页属性时，初始化每页记录数。	10
pageList	array	当设置分页属性时，初始化每页记录数列表。	[10,20,30,40,50]
queryParams	object	当请求远程数据时，发送的额外参数。 示例: $(‘#dg‘).datagrid({ queryParams: { name: ‘easyui‘, subject: ‘datagrid‘ } });	{}
sortName	string	当数据表格初始化时以哪一列来排序。	null
sortOrder	string	定义排序顺序，可以是‘asc‘或者‘desc‘（正序或者倒序）。	asc
remoteSort	boolean	定义是否通过远程服务器对数据排序。	true
showFooter	boolean	定义是否显示行底（如果是做统计表格，这里可以显示总计等）。	false
rowStyler	function	返回样式，如：‘background:red‘，function有2个参数： index：行索引，从0开始. row：对应于该行记录的对象。 示例: $(‘#dg‘).datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return ‘background-color:#6293BB;color:#fff;‘; } } });
loader	function	定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数： param: 参数对象传递到远程服务器。 success(data): 回调函数将被调用成功检索的数据。 error():回调函数将被调用失败时检索数据。	json loader
loadFilter	function	返回过滤的数据显示。该函数需要一个参数‘data‘，表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。 示例: // removing ‘d‘ object from asp.net web service json output $(‘#dg‘).datagrid({ loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } });
editors	object	定义当编辑一行时的编辑模式。	predefined editors
view	object	定义数据表格的视图。	default view

 

列属性（Column Properties）

数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。