Easyui 分页 官方文档修改后很容易懂
来源:互联网 发布:mac链接不上硬盘 编辑:程序博客网 时间:2024/06/06 16:29
JSP:
<table id="datagrid名" data-options="fitColumns:true,singleSelect:true,pagination:true,striped:true,autoRowHeight:true" style="height:100%">
<thead><tr>
<th data-options="field:'1',halign:'center'" width="10%"></th>
<th data-options="field:'2',halign:'center'" width="10%"></th>
<th data-options="field:'3',halign:'center'" width="10%" ></th>
<th data-options="field:'4',halign:'center'" width="10%"></th>
<th data-options="field:'5',halign:'center'" width="10%"></th>
<th data-options="field:'6',halign:'center'" width="10%"></th>
<th data-options="field:'7',halign:'center'" width="10%"></th>
<th data-options="field:'8',halign:'center'" width="10%"></th>
<th data-options="field:'9',halign:'center'" width="10%"></th>
<th data-options="field:'10',halign:'center'" width="10%">s</th>
</tr>
</thead>
</table>
注意:不要加class="easyui-datagrid",切记要加singleSelect:true
js:
第一步不需要更改任何
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
pageList: [10, 20, 30, 40, 50],
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
第二部:只需要改url,然后把后台获取的值(直接可以是查询所有的值,下面的result就是返回结果)通过循环一一赋值给数组rows
function getData(){
var rows = [];
$.ajax({
url:"查询所有的sql语句",
dataType:"JSON",
type:"post",
async:false,
success:function(result){
console.info(result);
for ( var i = 0; i < result.length; i++) {
rows.push({
1:result[i].1,
2:result[i].2,
3:result[i].3,
4:result[i].4,
5:result[i].5
});
}
}
});
return rows;
}
把返回的值就可以赋给datagrid,记住名字要一一对应包括大小写
function loadFinalTestDatagrid(){
$('#FinalTestDatagrid').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
}
下面是初始化就加载,看你需要了,我反正全是初始化就加载完的
$(function(){
loadFinalTestDatagrid();
});
- Easyui 分页 官方文档修改后很容易懂
- Jquery EasyUI dataGrid 修改默认分页大小
- easyui datagrid 生成动态列后 实现分页
- easyui 分页
- easyui分页
- EasyUI 分页
- easyui分页
- easyUI分页
- EasyUI 分页
- django 1.8 官方文档翻译:13-6 分页
- easyui的datagrid修改一行信息后,更新本行
- easyui tabs 一个窗口修改完成后刷新另一个窗口
- 修改mysql初始密码(摘自mysql官方文档)
- easyUi --修改
- 官方文档
- 官方文档
- APP紧急修改后的app store官方审核通道
- APP紧急修改后的app store官方审核通道
- LeetCode 450 Delete Node in a BST(删除BST节点)
- 01
- 单链表是否有环问题
- Java 日期处理工具类
- Oracle中char数据类型,length长度不足时,会自动用空格补上
- Easyui 分页 官方文档修改后很容易懂
- vue调用百度地图api时Bmap没有定义的解决办法
- centOS重装mariadb
- hue 设置中文
- LeetCode 40 Combination Sum II
- 离散题目18 求传递闭包 warshell算法
- 01--------php安装
- 这么多连麦方案,到底哪种适合你?
- vm(virtual option)选项