文档章节

webix datatable 分页

 余风德
发布于 2015/12/15 22:09
字数 332
阅读 104
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day60-20180818-流利阅读笔记-待学习

钉钉:工作的归工作,生活的…也归工作? 毛西 2018-08-18 1.今日导读 你用过“钉钉”么?被公司要求使用钉钉的感受是如何的呢?这款阿里巴巴旗下的移动办公社交平台在弯道超车微信、为许多企...

aibinxiao
43分钟前
6
0
Kubernetes的HTTPS和证书问题,汇总

通过Kubernetes建立服务网站,需要干的事情和HTTPS和证书问题,汇总如下: 建立Nginx服务器 搞服务器第一步,Ubuntu 18.04设置静态IP 安装Nginx服务。 Kubernetes的deployment使用 创建服务,...

openthings
58分钟前
2
0
php 使用redis锁限制并发访问类

1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功。 例如换领优惠券,如果用户同一时间并发提交换领...

豆花饭烧土豆
今天
0
0
Linux环境搭建 | 手把手教你配置Linux虚拟机

在上一节 「手把你教你安装Linux虚拟机」 里,我们已经安装好了Linux虚拟机,在这一节里,我们将配置安装好的Linux虚拟机,使其达到可以开发的程度。 Ubuntu刚安装完毕之后,还无法进行开发,...

良许Linux
今天
0
0
(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部