webix datatable 分页
webix datatable 分页
余风德 发表于2年前
webix datatable 分页
  • 发表于 2年前
  • 阅读 97
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: webix datatable 分页 半成品 在下页分页时,还需要将上一页的的数据一起带到客户端

客户端代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/codebase/webix.css" type="text/css" media="screen" charset="utf-8">
<script src="/codebase/webix.js" type="text/javascript" charset="utf-8"></script>
<title>DataTable</title>
</head>
<body>
<div id="tableA"></div>
<script type="text/javascript" charset="utf-8">
  webix.ready(function(){
   webix.ui({
    container:"tableA",
    margin:10,
    cols:[
    {
     rows:[
     { 
      id:"t1",
      select:true,
      container:"testA",
      view:"datatable",
      columns:[
       { id:"id", header:"ID" } ,
       { id:"name", header:"名称" }
      ],
      height:500,
      autowidth:true,
      on:{
       onBeforeLoad:function(){
        this.showOverlay("<font size='4'>Loading...</font>");
       },
       onAfterLoad:function(){
        this.hideOverlay();
       }
      },
      scrollY:false,
      url:"服务器请求地址" ,
      pager:{
       view:"pager",
       size:10,
       group:6,
       template: "{common.prev()} {common.pages()} {common.next()} <font size='4'>第 {common.page()}页/共 #limit# 页 </font>"
      }
     }
     ]
    }
    ]
   });
  });
  </script>
</body>
</html>  

服务端代码模拟数据

  1. 第一页json

     {
     "total_count":100, //此处很重要
     "pos":0,    //暂时不知是什么内容,知道的麻烦说一下
     "data":[
      {"id":1,"name":"t1"},
      {"id":2,"name":"t2"},
      {"id":3,"name":"t3"},
      {"id":4,"name":"t4"},
      {"id":5,"name":"t5"}
     ]
    }

  2. 第二页json

{
 "total_count":100, //此处很重要
 "pos":0,    //暂时不知是什么内容,知道的麻烦说一下
 "data":[
  {"id":1,"name":"t1"},
  {"id":2,"name":"t2"},
  {"id":3,"name":"t3"},
  {"id":4,"name":"t4"},
  {"id":5,"name":"t5"}, ////////暂时只能在第2页的时候将之前第一页的数据也返回,客户端才能显示
  {"id":6,"name":"t6"},
  {"id":7,"name":"t7"},
  {"id":8,"name":"t8"},
  {"id":9,"name":"t9"},
  {"id":10,"name":"t10"}
 ]

标签: webix datatable
共有 人打赏支持
粉丝 0
博文 1
码字总数 332
×
余风德
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: