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. Java 学习笔记 执行外部命令 包装类 枚举类型

    执行外部命令 Runtime只能通过静态方法getRuntime获得,可以用来执行外部的命令 Runtime runtime = Runtime.getRuntime(); runtime.exec( ...

  2. Java并发编程-Semaphore

    基于AQS的前世今生,来学习并发工具类Semaphore.本文将从Semaphore的应用场景.源码原理解析来学习这个并发工具类. 1. 应用场景 Semaphore用来控制同时访问某个特定资源的操作 ...

  3. 7;XHTML表单

    1.表单的功能结构 2.文本栏.密码栏.隐藏栏 3.复选栏.单选栏 4.窗体栏位.区块栏位 5.按钮.图像按钮 6.允许上传文件 7.表单的外框和标题 8.元件的次序和快捷键 表单是提供让读者在网页上 ...

  4. URL 与 URI 介绍

    URL: 统一资源定位符 ( Uniform Resource Locator ) URI: 统一资源标识符 ( Uniform Resource Identifier ) URL 地址:https: ...

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

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

  6. JS与CSS阻止元素被选中及清除选中的方法总结

    有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...

  7. 活字格对接RF手持机与ERP系统，帮助RFID快速盘点方案落地

    这个玩意有点意思,要不要搞来玩玩? ----------- 射频技术(RF)是Radio Frequency的缩写,较常见的应用有无线射频识别(Radio Frequency Identificati ...

  8. Nginx http相关常用配置总结

    Nginx http相关常用配置总结   by:授客  QQ:1033553122   测试环境 nginx-1.10.0 client_max_body_size Syntax: client_ma ...

  9. drawable自定义字体颜色

    一个很基础简单的问题,但是以前没用过,都是代码控制效果的,最近新的项目发现设置了color属性没效果,后来查了会资料才发现得单独设置,记录一下,虽然是小问题 上面的xml控制背景的变化,一开始我设置在 ...

  10. gitlab runner安装与使用

    今天来讲一下如何使用gitlab-runner 下载runner,根据自己对应服务器的型号自行选择下载: # Linux x86- sudo wget -O /usr/local/bin/gitlab ...