BootStrap Table前台和后台分页对JSON格式的要求

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格式的要求，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap中Table分页插件使用详解

    BootStrap中Table分页插件使用详解

    分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

  • bootstrap table 服务器端分页例子分享

    1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru

  • 第一次动手实现bootstrap table分页效果

    第一次动手实现bootstrap table分页效果

    先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q

  • BootStrap Table 分页后重新搜索问题的解决办法

    前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").boot

  • DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免

  • Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax.   1可以用读流文件解决.2 如果想用request.form 方式,设置  contentType: "application/x-www-form-

  • BootStrap中的table实现数据填充与分页应用小结

    BootStrap中的table实现数据填充与分页应用小结

    BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化.最近后台使用此插件做了一个表格应用,做个总结. 1.使用方法 可以通过又拍云提供的CDN获取js插件,样式表和国际化插件,或者直接去官网下载.将下面的js插件和样式放到html head 头里即可使用. //样式 <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.

  • BootStrap Table前台和后台分页对JSON格式的要求

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

  • jsp中利用jquery+ajax在前后台之间传递json格式参数

    经过一段时间的实验琢磨,终于将前后台之间的参数传递搞定了,实验所用工具myeclipse+structs1.2. 总结:容易出错的地方:1.ajax中data的格式一定要写对,这里举了两种形式,一种是 data:{参数:""} 另一种是 data:"参数="+变量. 2.后台传递到前台数据转化为json格式,步骤要掌握好. 3.在js使用jquery必须要引用进来,否则会不执行jquery语句,这个问题困扰了我半天才解决掉,菜鸟的悲哀啊.jquery引用流程如下:网

  • BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

    主要是页码超出范围带来的问题,仅在此记录一下,这里我通过修改bootstrap-table.js的initServer方法中的查询success回调函数解决,将该回调函数改为: function (res) { /**TODO:2016-12-20新加的代码,处理页码错误问题开始*/ if(res.total!=0&&res.rows.length==0){//总记录数大于0,但当前页记录数为0,则此时页码超过了最大页码误 that.options.pageNumber = Math.ce

  • 如何将ajax请求返回的Json格式数据循环输出成table形式

    如何将ajax请求返回的Json格式数据循环输出成table形式

    首先,Ajax请求数据,(用的是Jquery的Ajax) 复制代码 代码如下: <script> $(function(){ $('#test').click(function(){ $.ajax({ url:'__APP__/Article/jsonTest', type:'post', success:function(data){ var item; $.each(data,function(i,result){ item = "<tr><td>&quo

  • 值得分享的bootstrap table实例

    值得分享的bootstrap table实例

    bootstrap table 封装了一套完善的数据表格组件,把下面的代码复制一下估计你需要的基本功能都有了,没有的再看看手册对比着我给的实例也能很快的熟悉了. 客户端 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-Table</title> <link rel="stylesheet" href

  • Bootstrap Table服务器分页与在线编辑应用总结

    Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据的起止时间,查询一定时间范围的数据.在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现. Bootstrap Table有两种使用方式: 1.对普通的 table 设置 data 属性: 2.通过JavaScript 来启用 Bootstrap Table 插件.

  • Bootstrap Table的使用总结

    Bootstrap Table的使用总结

    Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了. $.map(data,function(item,index){return XXX}) 使用的总结: 把一个数组,按照新的方式进行组装返回,和原来的数组不一样. 遍历data数组中的每个元素,并按照return中的计算方式 形成一个新的

  • Bootstrap table的使用方法

    Bootstrap table的使用方法

    Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到 这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了. $.map(data,function(item,index){return XXX}) //使用的总结: //把一个数组,按照新的方式进行组装返回,和原来的数组不一样. //遍历data数组中的每个元素,并按照return中的计算方式

  • JS表格组件神器bootstrap table详解（强化版）

    JS表格组件神器bootstrap table详解（强化版）

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

  • JS组件系列之Bootstrap table表格组件神器【终结篇】

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap table表格组件神器[二.父子表和行列调序] Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.那么本文给大家介绍JS组件系列之Bootstrap

随机推荐