easyui datagrid 前台分页的实现java采用的版本
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了easyui datagrid 前台分页的实现java采用的版本，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5248字，纯文字阅读大概需要8分钟。
内容图文
转easyui datagrid 前台分页的实现
easyui datagrid 前台分页的实现java采用的版本
?使用easyui分页，有后台服务器端实现和前台浏览器端实现。服务器端实现按规定的格式返回数据就可以了，前台实现需要写js来实现。
代码如下：
关键代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<!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 前台分页的实现java采用的版本全部内容，希望文章能够帮你解决easyui datagrid 前台分页的实现java采用的版本所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】