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. 记录ThreadPoolTaskExecutor线程池的在项目中的实际应用，讲解一下线程池的配置和参数理解。

    前言:最近项目中与融360项目中接口对接,有反馈接口(也就是我们接收到请求,需要立即响应,并且还要有一个接口推送给他们其他计算结果),推送过程耗时.或者说两个接口不能是同时返回,有先后顺序. 这时我想 ...

  2. EF实现增删改查

    从来没想到过能在这个上面翻车,感慨自学没有培训来得系统啊,废话不多说 ORM:对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一 ...

  3. 四、HTTP控制器

    1.控制器的作用:数据和视图之间的桥梁 2.控制器创建方法: (1)手动创建 <?php namespace App\Http\Controllers; class UserController ...

  4. 用grunt进行ES6转换，再用uglify压缩所有js实例

    1.首先安装node.js 去官网下载exe执行文件安装即可,安装完成后自带有npm管理. 2.安装grunt CLI 在项目根文件夹下执行如下代码: npm install -g grunt-cli ...

  5. 洛谷P3388 【模板】割点（割顶）(tarjan求割点)

    题目背景 割点 题目描述 给出一个n个点,m条边的无向图,求图的割点. 输入输出格式 输入格式: 第一行输入n,m 下面m行每行输入x,y表示x到y有一条边 输出格式: 第一行输出割点个数 第二行按照 ...

  6. 使用混淆ProGuard压缩代码和资源/减少方法数量

    ProGuard介绍 ProGuard是一个Java类文件压缩器,优化器,混淆器和预先文件验证器. 压缩步骤检测和删除未使用的类,字段,方法和属性. 优化步骤分析和优化方法的字节码. 混淆步骤使用短无 ...

  7. 键盘ascll码表

    键盘ascll码表-自用

  8. 章节三、5-Getters-Setters和this关键字part01

    我们新建第一个Car类: package introduction; public class Car { //颜色 private String color; //生成商 private Strin ...

  9. (后端)安装mongodb以及设置为windows服务 详细步骤(转)

    1.在data文件夹下新建一个log文件夹,用于存放日志文件,在log文件夹下新建文件mongodb.log 2.在 D:\mongodb文件夹下新建文件mongo.config,并用记事本打开mon ...

  10. (网页)jQuery判断checkbox是否选中的方法

    if($('#checkbox-id').is(':checked')) { // do something} if ($('#checkbox-id').attr('checked')) {    ...