转easyui datagrid 前台分页的实现

easyui datagrid 前台分页的实现java采用的版本

来源：本站原创 js知识超过5,090人围观暂无评论

使用easyui分页，有后台服务器端实现和前台浏览器端实现。服务器端实现按规定的格式返回数据就可以了，前台实现需要写js来实现。

代码如下：

关键代码：

function pagerFilter(data){

if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组

data = {

total: data.length,

rows: data

}

var dg = $(this);

var opts = dg.datagrid('options');

var pager = dg.datagrid('getPager');

pager.pagination({

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;

}

完整的Demo

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>客户端分页demo</title>

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

</head>

<body>

<h2>客户端分页dem</h2>

<div class="demo-info">

<div class="demo-tip icon-tip"></div>

<div></div>

</div>

<div style="margin:10px 0;"></div>

<table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="

rownumbers:true,

singleSelect:true,

autoRowHeight:false,

pagination:true,

pageSize:10">

<thead>

<tr>

<th field="inv" width="80">Inv No</th>

<th field="date" width="100">Date</th>

<th field="name" width="80">Name</th>

<th field="amount" width="80" align="right">Amount</th>

<th field="price" width="80" align="right">Price</th>

<th field="cost" width="100" align="right">Cost</th>

<th field="note" width="110">Note</th>

</tr>

</thead>

</table>

<script>

function getData(){//模拟数据

var rows = [];

for(var i=1; i<=80000; i++){

var amount = Math.floor(Math.random()*1000);

var price = Math.floor(Math.random()*1000);

rows.push({

inv: 'Inv No '+i,

date: $.fn.datebox.defaults.formatter(new Date()),

name: 'Name '+i,

amount: amount,

price: price,

cost: amount*price,

note: 'Note '+i

});

}

//console.log(JSON.stringify(rows));

return rows;

}

function pagerFilter(data){

if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组

data = {

total: data.length,

rows: data

}

var dg = $(this);

var opts = dg.datagrid('options');

var pager = dg.datagrid('getPager');

pager.pagination({

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;

}

$(function(){//加载数据

$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());

});

</script>

</body>

</html>

转easyui datagrid 前台分页的实现相关推荐

EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...
jQuery EasyUI DataGrid - 格式化列（formatter ）
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
给 Easyui Datagrid 扩展方法
给 Easyui Datagrid 扩展方法 $.extend($.fn.datagrid.methods, {/*** 更新非编辑列值* @param rowIndex : 行索引* @param ...
EasyUI DataGrid 合并单元格
EasyUI DataGrid 合并单元格 1 function mergeCells(){ 2 var arr =[{mergeFiled:"field",premiseFile ...
jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...
关于easyui datagrid分页的json格式
2019独角兽企业重金招聘Python工程师标准>>> 在网上找了很多资料,始终无法知晓easyui如果分页的话,需要传哪些值,并且json的组成格式是什么样的. 看了一篇质量比较好 ...
去掉easyui datagrid内部虚线的方式。
去掉easyui datagrid内部虚线的方式.easyui datagrid的样式是统一写在样式文件中的,如果想要统一替换可以找对应的datagird样式文件中的以下部分.如果想要改 ...
easyui datagrid 浏览器像素及改变表、列宽问题
转载以下文章时我还没有很深的研究easyui,现在回过头来看看,有点弱,如今easyui的1.3.1版本都出来了,下面的东西可以使用"fit:true"属性来解决 ======== ...

转easyui datagrid 前台分页的实现

easyui datagrid 前台分页的实现java采用的版本

转easyui datagrid 前台分页的实现相关推荐

最新文章

热门文章