开发者社区> 尘光掠影> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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





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

相关文章
VUE element-ui 之table表格双表头、表头内插入输入框
VUE element-ui 之table表格双表头、表头内插入输入框
247 0
Redisson 分布式锁源码 09:RedLock 红锁的故事
RedLock 红锁,是分布式锁中必须要了解的一个概念。 所以本文会先介绍什么是 RedLock,当大家对 RedLock 有一个基本的了解。然后再看 Redisson 中是如何实现 RedLock 的。
265 0
Vue ElementUI table给表格一个斜线分隔线
Vue ElementUI table给表格一个斜线分隔线
430 0
Tablestore+Delta Lake(快速开始)
本文介绍如何在E-MapReduce中通过Tablestore Spark Streaming Source将TableStore中的数据实时导入到Delta Lake中。 背景介绍 近些年来HTAP(Hybrid transaction/analytical processing)的热度越来越高,通过将存储和计算组合起来,既能支持传统的海量结构化数据分析,又能支持快速的事务更新写入,是设计数据密集型系统的一个成熟的架构。
7644 0
有了Tableau,为什么AWS还要做BI?
Quicksight是整个AWS生态中离商业决策最近的服务,直接解决大数据应用的“最后一公里”问题。其在整个生态中的定位如下: 它不需要用户有代码能力,自动识别和整合各种不同的数据源,并且自动进行数据可视化。最大程度降低了商业决策端用户使用大数据的成本,也有望解决业务和数据中心方一直存在的矛盾。
7485 0
EasyUI实例源码
jQuery+EasyUI实例源码 http://www.51aspx.com/code/jQueryEasyUIExample   ASP.NET MVC+EF+EasyUI权限 http://www.
882 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载