bootstrap-table 分页

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: [10], // 设置页面可以显示的数据条数
          pageSize: 10, // 页面数据条数
          pageNumber: 1, // 首页页码
          height:550,
          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:200
                  },
                  {
                      title: "用户昵称",
                      field: 'nickname',
                      align:'center',
                      valign:'center',
                      width:200
                  },
                  {
                      title: "问题",
                      field: 'title',
                      align:'center',
                      valign:'center',
                      width:200
                  }
              ]

      })

      $(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": "无法连接"
    }]
}

 

posted @ 2018-09-30 10:19  踏月而来  阅读(362)  评论(0)    收藏  举报