1.写好json 数据
{ "total":21, "rows":[ {"code":"001","name":"Name zhangsanfeng","addr":"莆田 11","wang":"xiao"}, {"code":"002","name":"Name 2","addr":"Address 13","wang":"xiao"}, {"code":"003","name":"Name 3","addr":"Address 87","wang":"xiao"}, {"code":"004","name":"Name 4","addr":"Address 63","wang":"xiao"}, {"code":"005","name":"Name 5","addr":"Address 45","wang":"xiao"}, {"code":"006","name":"Name 6","addr":"Address 16","wang":"xiao"}, {"code":"007","name":"Name 7","addr":"Address 27","wang":"xiao"}, {"code":"008","name":"Name 8","addr":"Address 81","wang":"xiao"}, {"code":"009","name":"Name 9","addr":"Address 69","wang":"xiao"}, {"code":"010","name":"Name 10","addr":"Address 78","wang":"xiao"}, {"code":"011","name":"Name 1","addr":"Address 11","wang":"xiao"}, {"code":"012","name":"Name 2","addr":"Address 13","wang":"xiao"}, {"code":"013","name":"Name 3","addr":"Address 87","wang":"xiao"}, {"code":"014","name":"Name 4","addr":"Address 63","wang":"xiao"}, {"code":"015","name":"Name 5","addr":"Address 45","wang":"xiao"}, {"code":"016","name":"Name 6","addr":"Address 16","wang":"xiao"}, {"code":"017","name":"Name 7","addr":"Address 27","wang":"xiao"}, {"code":"018","name":"Name 8","addr":"Address 81","wang":"xiao"}, {"code":"019","name":"Name 9","addr":"Address 69","wang":"xiao"}, {"code":"020","name":"Name 10","addr":"Address 78","wang":"xiao"}, {"code":"021","name":"Name 10","addr":"Address 78","wang":"xiao"},{"code":"022","name":"Name 10","addr":"Address 78","wang":"xiao"},{"code":"023","name":"Name 10","addr":"Address 78","wang":"xiao"},{"code":"024","name":"Name 10","addr":"Address 78","wang":"xiao"},{"code":"025","name":"Name 10","addr":"Address 78","wang":"xiao"},{"code":"026","name":"Name 10","addr":"Address 78","wang":"xiao"},{"code":"027","name":"Name 10","addr":"Address 78","wang":"xiao"} ] } 2. html 页面代码
<!DOCTYPE html>
<html><head> <meta charset="UTF-8"> <title>Client Side Pagination - jQuery EasyUI Demo</title> <style type="text/css"> #dg { border-color:red; } </style> <link href="../themes/icon.css" rel="stylesheet" /> <link href="../themes/default/easyui.css" rel="stylesheet" /> <link href="../src/demo.css" rel="stylesheet" /> <script src="../comjs/jquery-1.8.0.min.js"></script> <script src="../comjs/jquery.easyui.min.js"></script></head><body> <h2>Client Side Pagination</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>This sample shows how to implement client side pagination in DataGrid.</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="code" width="80">code No</th> <th field="name" width="100">name</th> <th field="addr" width="80">addr</th> <th field="wang" width="80" align="right">Amount</th> </tr> </thead> </table> <script> var jilu; var rows = []; function getData() { //ajax kai $.ajax({ url: '../datagrid_data.aspx', type: "get", async: false, dataType: "json", data: 'id=' + Math.random(), success: function (json) { jilu = json; for (var i = 0; i < json.rows.length; i++) { rows.push({ "code": json.rows[i].code, "name": json.rows[i].name, "addr": json.rows[i].addr, "wang": json.rows[i].wang }); } }, error: function (xhr, status, errorThrown) { alert("errorThrown=" + errorThrown); } }) return rows; } function pagerFilter1(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({//1 onSelectPage: function (pageNum, pageSize) {//2 opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', {//3 pageNumber: pageNum, pageSize: pageSize });//3 dg.datagrid('loadData', data); }, pageList:[4,10,15,20]//2 });//1 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').css('text-align','center'); $('#dg').datagrid({ loadFilter: pagerFilter1, width: 446, height:200, pageList: [4, 10, 15, 20], pageSize:4 }).datagrid('loadData', getData()); }); </script></body></html>就这么爽分页成功