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

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 ...
版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083
一、前言

    前一篇博客已经介绍了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>

三、总结

    1. easyui-table客户端分页只需要几个步骤即可实现:引入easyui的js、css;html页面添加一个table
标签同时给id赋值;js添加初始化代码;
    2.easyui-table客户端分页的数据源可以是服务器端传递过来,也可以是前端js获取,该实例使用的是前端
js的数据源,初始化参数需要添加data,同时去掉url;
    3.easyui-table客户端分页和bootstrap-table的使用方法有点不同,bootstrap相对来说会比较简单使用,而easyui需要自行设置分页方式,需要添加额外的js代码进行分页;
    3.本博客的实例下载路径:http://download.csdn.net/detail/alan_liuyue/9922822





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章