bootstrap-table  

<!DOCTYPE html>

<head>

    <meta charset="UTF-8"/>

    <title>用户反馈信息</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>

    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>

<body>

   <div style="width: 100%">

       <table id="table" ></table>

   </div>

  <script>

      $("#table").bootstrapTable({ // 对应table标签的id

          url: "/getToothFeedbacks", // 获取表格数据的url

          cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true

          striped: true,  //表格显示条纹，默认为false

          pagination: true, // 在表格底部显示分页组件，默认false

          pageList: [], // 设置页面可以显示的数据条数

          pageSize: , // 页面数据条数

          pageNumber: , // 首页页码

          height:,

          sidePagination: 'server', // 设置为服务器端分页

          queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

                  return {

                      pageSize: params.limit, // 每页要显示的数据条数

                      offset: params.offset, // 每页显示数据的开始行号

                      sort: params.sort, // 要排序的字段

                      sortOrder: params.order, // 排序规则

                      startTime: $("#sTime").val(),

                      endTime:$("#eTime").val()

                  }

          },

          columns: [

                  {

                      title: "手机号",

                      field: 'mobile',

                      align:'center',

                      valign:'center',

                      width:

                  },

                  {

                      title: "用户昵称",

                      field: 'nickname',

                      align:'center',

                      valign:'center',

                      width:

                  },

                  {

                      title: "问题",

                      field: 'title',

                      align:'center',

                      valign:'center',

                      width:

                  }

              ]

      })

      $(function() {

         //搜索时的请求参数

          $(".search").click(function(){

            $('#table').bootstrapTable('refresh', {url:'/getWatchFeedbacks',query: {startTime:startTime,endTime:endTime}});

          });

      })

  </script>

</body>

</html>

返回的格式

{

    "total": 3,

    "rows": [{

        "mobile": "13510122281022",

        "nickname": "hhz",

        "title": "xxx？"

    }, {

        "mobile": "15122260042609",

        "nickname": "亚历山大",

        "title": "蓝牙不能连接"

    }, {

        "mobile": "15951522216890",

        "nickname": "Sean",

        "title": "无法连接"

    }]

}

bootstrap-table 分页的更多相关文章

  1. Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...

  2. bootstrap table分页（前后端两种方式实现）

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

  3. bootstrap table 分页序号递增问题 （转）

    原文地址:https://segmentfault.com/q/1010000011040346 如题,怎么在bootstrap table中显示序号,序号递增,并且分页有效,等于是每页10条,第2页 ...

  4. bootstrap table分页，重新数据查询时页码为当前页问题

    问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...

  5. bootstrap table分页limit计算pageIndex和pageSize

    由于bootstrap table的js无法直接获取pageSize和pageIndex的值,只能通过limit进行计算.

  6. Bootstrap table 分页 In asp.net MVC

    中文翻译文档: http://blog.csdn.net/rickiyeat/article/details/56483577 版本说明: Jquery v2.1.1 Bootstrap V3.3.7 ...

  7. [转]Bootstrap table 分页 In asp.net MVC

    本文转自:https://www.cnblogs.com/lenovo_tiger_love/p/7474403.html 中文翻译文档: http://blog.csdn.net/rickiyeat ...

  8. bootstrap table 分页后,重新搜索的问题

    前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页.  这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...

  9. bootstrap table分页后刷新跳到第一页

    之前这样写是不行的,这时候页数还是原来的页数 $('#tb_departments').bootstrapTable(('refresh')); 需要改成: $("#tb_departmen ...

  10. bootstrap table 分页显示问题

    1.bootstrap-table客户端分页 客户端分页的数据源可以是后台服务器端传递过来(一次性获取,即获取所有你需要的数据),点击页码不再请求后台,利用页面缓存分页;cache : true, / ...

随机推荐

  1. php中的implements 使用详解

    php类中接口的应用关键字是interface.implements了,接口是一种成员属性全部为抽象或常量的特殊抽象类,implements主要是对类名,类所拥有的方法,以及所传参数起约束和规范做用, ...

  2. Hibernate入门(十)inverse

    双向关联产生多余的SQL语句 /** * 添加一个订单到id为6的客户中 */ @Test public void fun1(){ Session session = HibernateUtils.g ...

  3. 给大家带来一些 horm的一些知识！

    1. form action 提交地址     https://www.baidu.com merhod 提交 方式post get get是在http的url上提交不加密 post加密在http 中 ...

  4. <a>标签的特殊和文本的样式

    a是特殊的,要改变a里面的颜色,必须直接给a设置,给a的父级设置不行 属性继承:明明是父级上的的设置样式,结果后代标签也跟着发生变化,这就叫做属性继承. Html 标记语言, 不是编程语言.说白了就是 ...

  5. vue（二）-父子组件语法

    语法: 子组件: 给子组件弄个名字,name.props用来声明从父组件传来的数据.其他html和css部分正常写. 父组件: HTML部分:使用子组件name作为标签来显示子组件.:items=“i ...

  6. viewer.js 视图预览demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. Linux上Simplescalar/ARM的安装和运行文档

    本文是基于ARM的simplescalar在ubuntu下的安装说明 1.1 软件下载  *********************文件下载地址:http://yunpan.cn/cw2n7dAyfG ...

  8. SQLite: sql script demo

    如果有成熟的架构,如何根据数据库关系的表.视图等,进行代码生成架构?减少写代码的时间? -- 考虑主键外键 -- create database geovindu; use geovindu; --2 ...

  9. 洛谷P3038 [USACO11DEC]牧草种植Grass Planting

    题目描述 Farmer John has N barren pastures (2 <= N <= 100,000) connected by N-1 bidirectional road ...

  10. 洛谷P5245 【模板】多项式快速幂(多项式ln 多项式exp)

    题意 题目链接 Sol \(B(x) = \exp(K\ln(A(x)))\) 做完了... 复杂度\(O(n\log n)\) // luogu-judger-enable-o2 // luogu- ...