标签（空格分隔）： js
Bootstrap table 使用
- 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，请求参数 以及请求总个数求出。就可以根据以上配置显示带有分页的表格
