easyui 前端实现分页 复制就能用
程序员文章站
2022-03-20 19:23:30
先上图 数据是随机生成的,前端分页是直接把数据库的数据一次性拿出来进行分页,而后端是你要多少数据我再取出来给你分页,不是一次性的,前端分页也叫假分页。直接复制的时候记得在最后改下你的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