文档章节

webix datatable 分页

 余风德
发布于 2015/12/15 22:09
字数 332
阅读 103
收藏 1
点赞 0
评论 0

客户端代码:

<!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 ⋅ 14

Webix 1.7 发布,新增桌面和移动端新皮肤

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

oschina ⋅ 2014/04/17 ⋅ 3

Webix 1.10 发布,兼容 IE 12

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

oschina ⋅ 2014/08/01 ⋅ 8

JavaScript UI 库--Webix

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

Albert-Liu ⋅ 2013/10/07 ⋅ 8

Webix 1.9 发布,JavaScript 的 UI 库

Webix UI 1.9 发布,该版本值得关注的改进包括: 热键控制 扩展菜单功能 其他 UI 的改进 详细介绍和未来开发计划请看发行说明。 Webix 库中包含的组件 有Accordion、Calendar、Carousel、Cha...

oschina ⋅ 2014/06/25 ⋅ 7

Webix 2.3 发布,新增一些功能

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

oschina ⋅ 2015/05/08 ⋅ 10

Webix 2.0 发布,带来更好的性能

Webix 2.0 发布了,该版本最显著的提升就是性能得以提升。此外增强了 DataTable 组件,改进了 Tabbar,扩展对本地化的支持,改进属性单,高级的表单个可定制的滚动等等,详细介绍请看发行说明...

oschina ⋅ 2014/09/12 ⋅ 11

Webix 1.5 发布,改进了对手机设备的支持

Webix 1.5 发布,此版本最主要的特性就是能很好的支持桌面和手机设备,也就是用户开发一个 web 应用,可以在多个平台运行。此版本还改进了手机设备的皮肤,用户可以使用这个示例来检测自己的...

oschina ⋅ 2014/02/14 ⋅ 3

DataTable在项目中的应用

DataTable在项目中的应用 做web开发, 有的时候会用到表格,今天这里我将介绍一下DataTable, DataTable是一款jquery表格插件, 它是一个高度灵活的工具, 可以将任何HTML表格添加高级的交互功能...

陈小扁 ⋅ 2016/03/31 ⋅ 0

jQuery Datatable 实用简单实例

目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求。同时,jQuery Datatable强大的功能支持:排序,分页,搜索等。 Query Datatable能良好支持数据完...

sgyyz ⋅ 2014/05/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

说说javascript中的那些专业名词

DOM(Document Object Model) 文档对象模型 BOM(Browser Object Model) 浏览器对象模型 ECMA(European Computer Manufacturer's Association) 欧洲计算机制造商协会 W3C(World Wide Web Conso......

hang1989 ⋅ 9分钟前 ⋅ 0

Bootstrap Wizard 多步表单控件

废话 有一块需求是 有多步表单 点击下一步时触发验证一个范围内的表单,点击上一步或取消,清空表单并返回第一步,点击最后一步提交整个表单的 就找到了这个插件,本来自己写了一个原生的 fo...

无极之岚 ⋅ 25分钟前 ⋅ 0

如何利用Spring Cloud构建起自我修复型分布式系统

利用Netflix所打造的组件及各类大家熟知的工具,我们完全可以顺利应对由微服务以及分布式计算所带来的技术挑战。 在过去一年当中,微服务已经成为软件架构领域一个炙手可热的新名词,而且我们...

harries ⋅ 54分钟前 ⋅ 0

临近实习前的感想

再过两星期就要开始新的一段实习了,想想去年的这个时候也在实习,心中不免思绪万千,也一直想写对2017做个总结,但一直迟迟没有下笔。 2017年的春节,我就开始准备开学后找份实习。那时候就...

无精疯 ⋅ 今天 ⋅ 0

Spring AOP(面向切面编程)

Spring AOP概念: Spring AOP 可以劫持一个执行的方法,在方法执行之前或之后添加额外的功能。通常情况下,AOP把项目中需要在多处用到的功能,比如日志、安全和事物等集中到一个类中处理,而...

霍淇滨 ⋅ 今天 ⋅ 0

人工智能、机器学习、数据挖掘以及数据分析有什么联系?

人工智能是目前炙手可热的一个领域,所有的互联网公司以及各路大迦们纷纷表态人工智能将是下一个时代的革命性技术,可与互联网、移动互联网时代的变更相媲美;AlphaGo在围棋领域战胜人类最顶...

董黎明 ⋅ 今天 ⋅ 0

使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化 ⋅ 今天 ⋅ 0

设计模式 之 享元模式

设计模式 之 享元模式 定义 使用共享技术来有效地支持大量细粒度对象的复用 关键点:防止类多次创建,造成内存溢出; 使用享元模式来将内部状态与外部状态进行分离,在循环创建对象的环境下,...

GMarshal ⋅ 今天 ⋅ 0

SpringBoot集成Druid的最简单的小示例

参考网页 https://blog.csdn.net/king_is_everyone/article/details/53098350 建立maven工程 Pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM......

karma123 ⋅ 今天 ⋅ 0

Java虚拟机基本结构的简单记忆

Java堆:一般是放置实例化的对象的地方,堆分新生代和老年代空间,不断未被回收的对象越老,被放入老年代空间。分配最大堆空间:-Xmx 分配初始堆空间:-Xms,分配新生代空间:-Xmn,新生代的大小一...

算法之名 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部