html代码
<div style="width: 300px; height:250px; margin: 10px;"> <button onclick="findData()">加载数据</button> <table id="dg"></table> </div>js代码
var listData = []; $(function(){ $('#dg').datagrid({ fit: true, striped: true, singleSelect: true, pagination: true, rownumbers: true, remoteSort:false, //设置为本地排序 loadMsg:"数据正在加载......", onBeforeSortColumn:function(sort, order){ //datagrid排序前把全部数据加载进去 $("#dg").datagrid("loadData", listData); }, onSortColumn: function (sort, order) { //datagrid排序后记录已排序的数据并显示第一页数据 listData = $("#dg").datagrid("getData").rows; setPage(1); }, columns: [[ {field:'id', title:'id', width:50, sortable: true}, {field:'data', title:'data', width:100, sortable: true}, {field:'data2', title:'data2', width:100, sortable: true} ]] }); //datagrid本地分页 $("#dg").datagrid("getPager").pagination({ onSelectPage:setPage }); }) function findData(){ //清空排序 $("#dg").datagrid("sort",{ sortName: '', sortOrder: '' }); //模拟异步获取数据 $("#dg").datagrid("loading"); setTimeout(function(){ listData = getAjaxData(); setPage(1); $("#dg").datagrid("loaded"); },1000) } //设置页数并显示对应页数的数据 function setPage(pageNo){ var pager = $("#dg").datagrid("getPager"); var pageSize = $("#dg").datagrid('options').pageSize; var start = (pageNo - 1) * pageSize; var end = start + pageSize; $("#dg").datagrid("loadData", listData.slice(start, end)); pager.pagination('refresh', { total:listData.length, pageNumber:pageNo }); } //获取数据 function getAjaxData(){ var aCode = 'A'.charCodeAt(), ZCode = 'z'.charCodeAt(); var letterLength = ZCode - aCode; var list = []; for(var i=1; i<=1000; i++){ var index = i % letterLength; var data2 = String.fromCharCode(aCode + index); list.push({ id: i, data: 'data'+i, data2: data2 }) } return list; }引用easyui的js
<script src="https://code.jquery.com/jquery-2.0.3.js"></script> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/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/themes/color.css" /> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-groupview.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-bufferview.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>