easyui的datagrid分页详解

1.DOM格式：

<table id="qiandaoTable">
    <thead>
        <tr>
            <th data-options="field:'user_name',title:'姓名',width:100,align:'center'"></th>
            <th data-options="field:'company',title:'单位',width:100,align:'center'"></th>
            <th data-options="field:'date',title:'日期',width:100,align:'center'"></th>
            <th data-options="field:'datetime',title:'时间',width:100,align:'center'"></th>
            <th data-options="field:'address',title:'地点',width:100,align:'center'"></th>
            <th data-options="field:'zhushi',title:'说明',width:100,align:'center'"></th>
            <th data-options="field:'pic_path',title:'图片',width:100,align:'center'"></th>
        </tr>
    </thead>
</table>

说明：field-字段名，title-列的表头名，width-每列的宽，align-设置每列文本居中，居左，居右，还有其他的属性这里不列举。

2.js编写：

$("#zhibanTable").datagrid({
    url:"admin-exer-qiandaoExcelData",
    pagination:true,
    queryParams:{
        start_time:startDate,
        end_time:endDate,
    },
});

说明：url-向后台获取数据的url地址，pagination-true为开启工具栏、false关闭工具栏、默认开启，queryParams-向后台获取数据时传递的参数。其他属性可以前往官方文档查看：http://www.jeasyui.com/documentation/index.php

3.后台编写-php

function qiandaoExcelData(){
$start_time=input('start_time');
$end_time=input('end_time');
$page=input('page'); //页码，起始页1
$rows=input('rows'); //每页显示行。
		
$offset = ($page-1)*$rows; //计算从第几条数据开始获取
		
$data = Db::query('select * from company where date between "'.$start_time.'" and "'.$end_time.'" order by date,id limit '.$offset.','.$rows.';');
$allData = Db::query('select * from municipal_company where date between "'.$start_time.'" and "'.$end_time.'";');
$json["total"] = count($allData); //获取记录总数
$json["rows"]  = $data; //获取当前页码的记录
return json($json); //需要转为json数据
		
}

说明：在pagination:true的情况下，每当前端的数据刷新时，datagrid会自动向后台发送page,rows参数。从后台返回的json数据会直接加载到DOM元素绑定的table上。