文档章节

webix datatable 分页

 余风德
发布于 2015/12/15 22:09
字数 332
阅读 107
收藏 1

客户端代码:

<!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"}
 ]

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 1
码字总数 332
作品 0
深圳
私信 提问
Webix 1.7 发布,新增桌面和移动端新皮肤

Webix 1.7 发布,添加了迷人的默认新皮肤,支持触摸设备,改进了一些 UI ,修复了一些 bug。 此版本添加了桌面环境和移动端的新皮肤,是扁平化设计风格: 这个皮肤有两个版本:完整版和简洁版...

oschina
2014/04/17
2.2K
3
Webix 2.2 发布,新部件和 UI 改进

Webix 2.2 发布,此版本包括大量的便捷特性和大量的显著改进。 Webix 2.2 添加了一些新部件,对 UI 进行了优化,改进内容如下: 数据绑定:可以绑定 Tree, TreeTable 和 TreeCollection 数据...

oschina
2015/01/22
3.8K
14
JavaScript UI 库--Webix

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS、 Android 和 Blac...

Albert-Liu
2013/10/07
33.1K
8
Webix 1.10 发布,兼容 IE 12

Webix 1.10 发布,此版本并未包括什么大功能,只是一些 bug 修复和小的更新。Webix 1.10 添加了新文档,兼容 IE 12。详细列表请看这里,下载请前往这里。 XB 软件公司最近发布了JavaScript ...

oschina
2014/08/01
2.8K
8
Webix 2.3 发布,新增一些功能

Webix 2.3 发布,两个细节上的改变是——默认日历控件上时间解析格式为"%Y-%m-%d" to "%Y-%m-%d %H:%i";布局大小发生变化(此版本中高度和宽度是布局上的一个全尺寸,包括所有边缘和填充)。...

oschina
2015/05/08
2.9K
10

没有更多内容

加载失败,请刷新页面

加载更多

VMware前路难测,多个厂家群雄逐鹿

在人们高谈Salesforce、亚马逊等新兴云计算厂商取得的成就时,以VMware、HPE和Cisco为代表的老牌厂商也在进行着自己的转型和变化,而且还取得一定的进展。以VMware为例,虚拟机巨头公布了第二...

linux-tao
20分钟前
1
0
Palindrome Linked List(leetcode234)

Given a singly linked list, determine if it is a palindrome. Example 1: Input: 1->2Output: false Example 2: Input: 1->2->2->1Output: true Follow up: Could you do it in O(n) ......

woshixin
22分钟前
1
0
【宇润日常疯测-003】PHP 序列化和 JSON 哪个更好?

有了 Swoole 以后,用我们熟悉的 PHP 就可以很方便地开发网络通信应用。有时候我们系统内部需要交换数据,那么,这时候问题来了,网络通讯的数据格式是选择 JSON 还是 serialize 呢? 一通分...

宇润
22分钟前
2
0
mybatis批量操作sql配置

在写批量sql操作时,遇到执行报错: <foreach collection="list" item="item" index="index" separator=";"> update t_xxx set column1=#{item.column1} where id= #{item.id} </foreach> 分......

lar555
35分钟前
2
0
L2TP VPN客户端配置

打开网络设置-->选择VPN-->添加VPN链接 配置完毕,打开更改适配器选项 右键-->属性 选中安全---允许使用安全协议,确定保存后连接vpn即可

阿伦哥-
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部