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基础】16、小数的浮点型和定点型

    一.简介 1.对于不需要任何准确计算精度的数字可以直接使用浮点型,但是如果需要精确计算的结果,则必须使用定点型(BigDecimal类) 浮点型:float,double 定点型:BigDecimal ...

  2. elasticsearch概念

    1.elasticsearch的核心概念 (1)Near Realtime(NRT):近实时,从写入数据到数据可以被搜索到有一个小延迟(大概1秒):基于es执行搜索和分析可以达到秒级 (2)Clust ...

  3. @RequestParam加与不加的区别

    最简单的两种写法,加或不加@RequestParam注解 @RequestMapping("/list") public String test(int userId) { ret ...

  4. VysorPro助手

    Vysor是一款非常强大而又好用的Android远程显示及控制软件,有Chrome插件版.Windows客户端版和Mac版,是Android开发和测试人员的必备神器.其中Windows客户端版相对Ch ...

  5. django rest framework 与 Vue 整合遇到的坑

    前提是已经有了Django项目与前端Vue打包好的dist文件 好,开始整合!!! 当然还是先设置Django的setting.py 1设置模板路径 2 设置静态文件路径 TEMPLATES = [ ...

  6. 布局优化之ViewStub源码分析

    源码分析 @RemoteView public final class ViewStub extends View { private int mInflatedId; private int mLa ...

  7. Git忽略规则及.gitignore规则不生效的解决办法（转）

    在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: 1 2 3 ...

  8. Django 自带认证功能auth模块和User对象的基本操作

    一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: authenticate()    ...

  9. mysql初始化提示安装perl

    all_db --user=mysql --datadir=/data/mysql", "delta": "0:00:00.222500", &quo ...

  10. 翻译：MySQL "Got an Error Reading Communication Packet" Errors

    前言: 本文是对Muhammad Irfan的这篇博客MySQL "Got an Error Reading Communication Packet" Errors的翻译,如有翻 ...