Bootstrap是一款前端非常流行的框架,其中的表格更为大家经常使用。大家都知道表格的分页分为前台和后台分页,也就是表格配置中sidePagination属性,当sidePagination: "server"时表示后台分页,sidePagination: "client"为前台分页。前台分页主要适用于数据量不多的情况,当数据量较大时,一般使用后台分页,我们平时在项目中大多数使用后台分页。

近期做项目的时候,同事问了直接改变sidePagination: "client"时,为什么分页功能失效,页面无法展示json数据,随即简单写了一个例子一试,还真是如此。接着就问其他同事并在网上搜索相关技术文章,搜了好久好久,终于在临近下班的时候搜索到了一篇文章,原来bootstrap中的表格分页不管是前台还是后台都对json中的内容格式有要求。

前台分页:

sidePagination: "client",对应的json格式必须为:

[

{

"id":1,

"name":"张三",

"age":22

},

...

]

后台分页:

sidePagination: "server",对应的json格式必须为:

{

"total":20,

"rows":[

{

"id":1,

"name":"张三",

"age":22

},

...

]

}

bootstrap-table前台和后台分页对json格式的要求的更多相关文章

  1. BootStrap Table将时间戳更改为日期格式

    一.使用BootStrap Table遇到的问题: 1.MyBatis从数据库中取出的时间格式如下:2017-12-04 21:43:19.0,时间后面多了一个点零. 2.从BootStrap Tab ...

  2. bootstrap table 解析写死的json.并且把进度条放进列中。

    function showPhaseInfo(phase){ //json字符串转json对象 var phaseInfo = eval(phase); $('#phaseTable').bootst ...

  3. 将html table中的数据封装成json格式数据

    var tab=document.getElementById("table1");     var rows=tab.rows;     //alert(rows.length) ...

  4. SpringMVC前后台数据传递中Json格式的相互转换(前台显示格式、Json-lib日期处理)及Spring中的WebDataBinder浅析

    两个方向: 一.前台至后台: Spring可以自动封装Bean,也就是说可以前台通过SpringMVC传递过来的属性值会自动对应到对象中的属性并封装成javaBean,但是只能是基本数据类型(int, ...

  5. ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装

    一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封装. 首先我们定义一个控制器,在新增控制器的时候,控制器会自动继承自AbpContro ...

  6. ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装以及6种处理时间格式化的方法

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封 ...

  7. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  8. ajax提交数据到java后台,并且返回json格式数据前台接收处理值

    1.前台html页面.有一段代码如下: 账  户:  <input type="text" name="userName" id="userN& ...

  9. bootstrap table 获取数据后的前台页面(后台怎么传就不必详细说明了吧)

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...

随机推荐

  1. LNMP源码编译安装

    思路:根据Linux系统以及公司网站系统的信息,选择合适的安装包进行安装 一.查看系统信息 # uname -a                        # 查看内核/操作系统/CPU信息 # ...

  2. hdu1520 Anniversary party 简单树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 思路:树形DP的入门题 定义dp[root][1]表示以root为根节点的子树,且root本身参 ...

  3. [转]JAVA自动装箱和拆箱

    http://www.cnblogs.com/dolphin0520/p/3780005.html 1.Java数据类型 装箱和拆箱之前,我们先来了解一下Java的基本数据类型. 在Java中,数据类 ...

  4. JAVA的HashSet源码分析

    一.HashSet概述 HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null元素. 二.HashS ...

  5. jQuery选择器的分类

    jQuery选择器的分类 jQuery中有很多分类,大类分为四类,四类里面又分为很多小类,下面就为大家一一介绍,这些选择器的使用和好处,Me用的是jQuery1.8.3的版本 选择器都有哪四类?? 1 ...

  6. swift学习 - 单例实现(singleton)

    swift中实现单例的方式 class LGConfig: NSObject { static let instance = LGConfig() private override init() { ...

  7. 012一对一 唯一外键关联映射_双向(one-to-one)

    ²  两个对象之间是一对一的关系,如Person-IdCard(人—身份证号) ²  有两种策略可以实现一对一的关联映射 主键关联:即让两个对象具有相同的主键值,以表明它们之间的一一对应的关系:数据库 ...

  8. Linux与mv命令结合,移动文件至指定目录

    转自:http://blog.csdn.net/hardwin/article/details/7711635 把当前目录下面的file(不包括目录),移动到/opt/shell find  .  - ...

  9. 未能加载文件或程序集Newtonsoft.Json, Version=4.5.0.0

    1.打开 程序管理器控制台  输入 PM> install-package newtonsoft.json 2.查看bin文件中是否有 newtonsoft.json.dll文件 3.在Web. ...

  10. C语言之字符串

    什么是字符串:使用双引号包含的字符序列. 简单的字符串"hello world" 一个'h'是一个字符 很多个字符组合在一起就是字符串了 字符串与字符数组 在C语言中没有专门的字符 ...