文档章节

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 2.2 发布,新部件和 UI 改进

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

oschina
2015/01/22
3.7K
14
Webix 1.7 发布,新增桌面和移动端新皮肤

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

oschina
2014/04/17
2.1K
3
Webix 1.10 发布,兼容 IE 12

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

oschina
2014/08/01
2.8K
8
JavaScript UI 库--Webix

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

Albert-Liu
2013/10/07
33.1K
8
Webix 2.3 发布,新增一些功能

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

oschina
2015/05/08
2.8K
10

没有更多内容

加载失败,请刷新页面

加载更多

理解JavaScript普通函数以及箭头函数里使用的this

this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj...

Jack088
12分钟前
0
0
RPC框架几行代码就够了

摘自梁飞的博客 - RPC框架几行代码就够了 简易RPC框架实现: /* * Copyright 2011 Alibaba.com All right reserved. This software is the * confidential and proprietary information ......

千面人
20分钟前
16
0
10 道关于 Java 泛型的面试题

1.Java中的泛型是什么 ? 使用泛型的好处是什么? 这是在各种Java泛型面试中,一开场你就会被问到的问题中的一个,主要集中在初级和中级面试中。那些拥有Java1.4或更早版本的开发背景的人都知道...

蚂蚁-Declan
31分钟前
1
0
配置Git

1.首先在本地创建ssh key; $ ssh-keygen -t rsa -C "your_email@youremail.com" 后面的your_email@youremail.com改为你在github上注册的邮箱,之后会要求确认路径和输入密码,我们这使用默认...

15834278076
31分钟前
1
0
day126-20181024-英语流利阅读-待学习

看脸时代,男人也要化妆 Lala 2018-10-24 1.今日导读 十年前,或许绝大多数男生都认为男性化妆是一件很滑稽的事。但现在,从电视荧幕上化妆的小鲜肉,到社交媒体涌现的大批男性美妆博主、网络...

飞鱼说编程
32分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部