Bootstrap-table请求服务器数据

标签（空格分隔）： js

Bootstrap table 使用

1. html中要引入bootstrap-table.css和bootstrap-table.js

2)具体配置

  function caseTable() {
      getParams();
      $('#table').bootstrapTable({
          url: "http://172.18.168.2:8080/evsserver/epvl/CaseService/GET/EvlsCases",
          method: 'POST', //请求方式
          dataType: 'json', 
          contentType: 'application/json;charset=UTF-8',
          height: 732,//固定表头
          queryParams: turnPageParam, //JSON.stringify({"pageNo": 1,"pageSize": 10,}),//参数
          clickToSelect: true, //是否启用点击选中行
          singleSelect: true, //复选框只能选择一条记录 
          pagination: true, //是否显示分页（*）
          sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
          paginationPreText: "<",
          paginationNextText: ">",
          pageSize: 17,
          //pageList: [2, 5],        //可供选择的每页的行数（*）
          paginationLoop:false,//设置true为启用分页连续循环模式。
          responseHandler: function (res) {
              //   console.log("res.para=====", res.para);
              var objtmp = {
                  "rows": res.para,
                  "total": seriesCaseTotal//总个数
              }
              return objtmp;
          },
          columns: [{
                  checkbox: true,
              },
              {
                  title: "序号",
                  width: "6%",
                  formatter: function (value, row, index) {
                      return currentPageSize * (numberPage - 1) + index + 1;
                  }
              },
              {
                  field: 'name',
                  title: '串并案名称',
                  formatter: function (value, row, index) {
                      return "<span title='" + value + "'>" + value + "</span>";
                  }
              },
              {
                  field: 'mergeNo',
                  title: '串并案编号',
                  formatter: function (value, row, index) {
                      return "<span title='" + value + "'>" + value + "</span>";
                  }
              }, {
                  field: 'type',
                  title: '案件类型'
              }, {
                  field: 'addUserName',
                  title: '创建人',
              }, {
                  field: 'solveState',
                  title: '侦破状态',
                  formatter: function (value, row, index) {
                      if (row.solveState == 1) {
                          return "已侦破"
                      } else {
                          return "未侦破"
                      }
                  }
              }, {
                  field: 'auditState',
                  title: '审核状态',
                  formatter: function (value, row, index) {
                      if (row.auditState == 1) {
                          return "未审核";
                      } else if (row.auditState == 2) {
                          return "已通过";
                      } else if (row.auditState == 3) {
                          return "已驳回";
                      }
                  }
              }
          ],
          formatNoMatches: function () {
              return "没有相关的匹配结果";
          },
          formatLoadingMessage: function () {
              return "请稍等，正在加载中...";
          },
          formatShowingRows: function (a, b, c) {
              return "显示第 " + a + "到第 " + b + " 条记录，总共 " + c + " 条记录";
          },
          formatRecordsPerPage: function (a) {
              return "每页显示 " + a + " 条记录";
          },
          onLoadSuccess: function (row) {
              //   console.log("加载成功时执行");
          },
          onLoadError: function (row) {
              alert("加载数据失败");
          },
          onClickRow: function (row, $element) {
              isCheck = row["0"];
              if (isCheck == false || isCheck == undefined) {
                  caseConnClear();
                  curConnInfo = row;
                  //   console.log("row----", JSON.stringify(row));
              } else {
                  isCheck = true;
              }
          },
          onPageChange: function () {
             console.log("翻页触发函数")
          },
      });

  }
  
  
   function getParams() {
      var caseName = $("input[name='conInput']").val(); //搜索关键字
      var content = new Object;
      if (caseName && caseName !== "") {
          content.name = [{
              "opr": "like",
              "value": caseName,
          }]
      }
      curSearchInfo = content;
      console.log("getParams content====", JSON.stringify(content));
      return JSON.stringify(content);
  }
  
//分页
  function turnPageParam(params) {
      var content = curSearchInfo;
      searchCaseTotalNum();
      content.pageNo = this.pageNumber; //pageNo; //页码
      content.pageSize = params.limit; //10; //lineCount; //每页显示的案件条数
      currentPageSize = content.pageSize;
      numberPage = this.pageNumber;
      //   console.log("JSON.stringify(content) 分页===",JSON.stringify(content))
      return JSON.stringify(content);
  }
  

注意： 请求url，请求参数 以及请求总个数求出。就可以根据以上配置显示带有分页的表格