easyui-table表格客户端分页实例-阿里云开发者社区

easyui-table表格客户端分页实例

2017-08-06 1338

+关注继续查看

一、前言

前一篇博客已经介绍了bootstrap-table的客户端分页，而本篇博客将会介绍另一种插件分页—easyui-table；

easyui-table也是是非常方便好用的前端表格分页插件，使用者只需要提供数据源就能实现非常完美的分页

效果，其分页方式可以分成客户端分页和服务端分页，其接收的数据源都是json数据格式。服务端分页在项目中

应用得非常的广泛，但有时也需要使用客户端分页来加快分页速度。本篇博客就不介绍服务端分页，只提供

easyui-table客户端分页的简单例子（数据源也从前端获取），供初学者了解使用。

二、实例


<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>easyui-table表格客户端分页实例</title>
 <link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
 <script type="text/javascript" src="./easyui/jquery.min.js"></script>
 <script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
</head>
<body>

  <script type="text/javascript"> 
    //手动制造30条测试数据
    var data = []; 
    for (var i = 1; i < 31; ++i) { 
      data.push({ 
        "movie":"战狼"+i, 
        "director":"吴京" + i +"号"
      }) 
    } 
    $(function () { 
      $("#easyuiTable").datagrid({ 
        title:"easyui测试客户端分页", 
        rownumbers:true, 
        fitColumns:true, 
        pagination:true, 
        data:data.slice(0,10), 
        columns:[ 
          [ 
            {field:'movie', align:"center", title:"电影",width:100},
            {field:'director', align:"center", title:"导演",width:100}
          ] 
        ] //easyui需要两个破折号
      }); 
   //以下代码处理分页功能，可直接使用
      var pager = $("#easyuiTable").datagrid("getPager"); 
      pager.pagination({ 
        total:data.length, 
  displayMsg:'当前显示从第{from}条到{to}条 共{total}条记录',
        onSelectPage:function (pageNo, pageSize) { 
          var start = (pageNo - 1) * pageSize; 
          var end = start + pageSize; 
          $("#easyuiTable").datagrid("loadData", data.slice(start, end)); 
          pager.pagination('refresh', { 
            total:data.length, 
            pageNumber:pageNo 
          }); 
        } 
      }); 
    }); 
  </script> 
</head> 
<body> 
<div id="easyuiTable"></div> 
</body> 
</html>