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,请求参数 以及请求总个数求出。就可以根据以上配置显示带有分页的表格

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足...
    往事随feng阅读 3,333评论 0 13
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 有一种爱与日月共枕 做着七彩斑澜的梦 勾引初心回到爱的原点 在一张白纸上复制 埋在山楂树下的温暖 那棵树依旧站在老...
    卓女阅读 439评论 0 7
  • 这一年,我在南方,你在北方,这一年,你是你,我是我。
    爱笑的女孩不一定最美丽阅读 147评论 0 0
  • 《第八天》 夜晚没有睡好,早晨昏沉沉,也要急忙起来。今天是治疗的日子,我也挂了别科的号...
    追逐梦的自由阅读 176评论 0 0