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. 4.5 explain 之 ref

    一.说明 显示索引的哪一列被使用了,如果可能的话,是一个常数.哪些列或常量被用于查找索引上的值. 二.示例 a. b. c. 关注我的公众号,精彩内容不能错过

  2. Netty实战六之ChannelHandler和ChannelPipeline

    1.Channel的生命周期 Interface Channel定义了一组和ChannelInboundHandler API密切相关的简单但功能强大的状态模型,以下列出Channel的4个状态. C ...

  3. Javascript继承2：创建即继承----构造函数继承

    //声明父类 function SuperClass(id){ //值类型公有属性 this.id = id; //引用类型公有属性 this.books = ['Html','Css']; } // ...

  4. Java并发编程-看懂AQS的前世今生

    在具备了volatile.CAS和模板方法设计模式的知识之后,我们可以来深入学习下AbstractQueuedSynchronizer(AQS),本文主要想从AQS的产生背景.设计和结构.源代码实现及 ...

  5. 通过示例学习JavaScript闭包

    译者按: 在上一篇博客,我们通过实现一个计数器,了解了如何使用闭包(Closure),这篇博客将提供一些代码示例,帮助大家理解闭包. 原文: JavaScript Closures for Dummi ...

  6. 今天学习了flex布局

    前言:这个网站详细讲了水平.垂直.水平垂直的css方法.https://css-tricks.com/centering-css-complete-guide/ 布局的传统解决方案,基于盒状模型,依赖 ...

  7. express 对数据库数据增删改查

    接着 http://www.cnblogs.com/cynthia-wuqian/p/6560548.html (1)概念 Schema(属性) :一种以文件形式存储的数 据库模型骨架,不具备数据库的 ...

  8. 小tips：JS之浅拷贝与深拷贝

    浅拷贝: function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } return c; } 深拷贝: functio ...

  9. JS的函数节流（throttle）

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

  10. loj#6032. 「雅礼集训 2017 Day2」水箱(并查集 贪心 扫描线)

    题意 链接 Sol 神仙题+神仙做法%%%%%%%% 我再来复述一遍.. 首先按照\(y\)坐标排序,然后维护一个扫描线从低处往高处考虑. 一个连通块的内状态使用两个变量即可维护\(ans\)表示联通 ...