easyui 前端实现分页 复制就能用
程序员文章站
2022-06-24 14:38:12
先上图 数据是随机生成的，前端分页是直接把数据库的数据一次性拿出来进行分页，而后端是你要多少数据我再取出来给你分页，不是一次性的，前端分页也叫假分页。直接复制的时候记得在最后改下你的table ID ......
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>客户端分页demo</title>
6 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
7 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
8 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
9 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
10 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
11 </head>
12 <body>
13 <h2>客户端分页dem</h2>
14 <div class="demo-info">
15 <div class="demo-tip icon-tip"></div>
16 <div></div>
17 </div>
18 <div style="margin:10px 0;"></div>
19
20 <table id="dg" title="client side pagination" style="width:700px;height:300px" data-options="
21 rownumbers:true,
22 singleselect:true,
23 autorowheight:false,
24 pagination:true,
25 pagesize:10">
26 <thead>
27 <tr>
28 <th field="inv" width="80">inv no</th>
29 <th field="date" width="100">date</th>
30 <th field="name" width="80">name</th>
31 <th field="amount" width="80" align="right">amount</th>
32 <th field="price" width="80" align="right">price</th>
33 <th field="cost" width="100" align="right">cost</th>
34 <th field="note" width="110">note</th>
35 </tr>
36 </thead>
37 </table>
38 <script>
39
40 function getdata(){//模拟数据
41 var rows = [];
42 for(var i=1; i<=80000; i++){
43 var amount = math.floor(math.random()*1000);
44 var price = math.floor(math.random()*1000);
45 rows.push({
46 inv: 'inv no '+i,
47 date: $.fn.datebox.defaults.formatter(new date()),
48 name: 'name '+i,
49 amount: amount,
50 price: price,
51 cost: amount*price,
52 note: 'note '+i
53 });
54 }
55 //console.log(json.stringify(rows));
56 return rows;
57
58 }
59
60 function pagerfilter(data){
61 if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组
62 data = {
63 total: data.length,
64 rows: data
65 }
66 }
67 var dg = $(this);
68 var opts = dg.datagrid('options');
69 var pager = dg.datagrid('getpager');
70 pager.pagination({
71 onselectpage:function(pagenum, pagesize){
72 opts.pagenumber = pagenum;
73 opts.pagesize = pagesize;
74 pager.pagination('refresh',{
75 pagenumber:pagenum,
76 pagesize:pagesize
77 });
78 dg.datagrid('loaddata',data);
79 }
80 });
81 if (!data.originalrows){
82 data.originalrows = (data.rows);
83 }
84 var start = (opts.pagenumber-1)*parseint(opts.pagesize);
85 var end = start + parseint(opts.pagesize);
86 data.rows = (data.originalrows.slice(start, end));
87 return data;
88 }
89
90 $(function(){//加载数据
91 $('#dg').datagrid({loadfilter:pagerfilter}).datagrid('loaddata', getdata());
92 });
93 </script>
94 </body>
95 </html>
先上图 数据是随机生成的，前端分页是直接把数据库的数据一次性拿出来进行分页，而后端是你要多少数据我再取出来给你分页，不是一次性的，前端分页也叫假分页。直接复制的时候记得在最后改下你的table id