html ps: 我用的引擎模板不是jsp 而是thymeleaf
<form id="form">
<div class="form-group">
<div class="col-md-2"><input type="text" value="" id="ask" name="ask"
placeholder="问题"></div>
<div class="col-md-2"><input type="text" value="" id="keyword" name="keyword"
placeholder="关键词"></div>
<div class="col-md-2"><input type="text" value="" id="productName"
name="productName" placeholder="商品名称"></div>
<div class="col-md-2"><input type="text" value="" id="shopNum" name="shopNum"
placeholder="商家编号"></div>
<select id="org">
<option value="部门">部门</option>
<option th:each="org : ${orgs}" th:value="${org.getName()}"
th:text="${org.getName()}"></option>
</select>
//提示，button type=button 千万不能少，在使用ajax情况下会提交两给请求，一个ajax ，一个刷新界面
<button th:type="button" class="btn btn-primary block full-width m-b"
id="refresh_button">查询
</button>
<button th:type="button" class="btn btn-primary block full-width m-b"
id="reset_button">重置
</button>
</div>
<div class="form-group">
<span th:each="model:${knownledgeSorts}">
<input class="cboxonclick" type="checkbox" th:name="${model.id}"/>
<span th:text="${model.getSort()}"></span>
</span>
</div>
</form>
<table id="table"></table>
js
$("#reset_button").click(function () {
document.getElementById("form").reset()
$("#table").bootstrapTable('refresh');
})
$("#refresh_button").click(function () {
var obj = document.getElementsByClassName("cboxonclick");
var sorts = new Array();
for (var i in obj) {
if (obj[i].checked) {
sorts.push(obj[i].name);
}
}
var ask = $("#ask").val();
var keyWord = $("#keyword").val();
var productName = $("#productName").val();
var shopNum = $("#shopNum").val();
var org = $("#org").val();
var sortList = sorts;
$.ajax({
type: "post",
url: "/knowledge/queryKnowledgeAll",
traditional: true,//防止深度序列化
data: {
ask: ask,
keyWord: keyWord,
productName: productName,
shopNum: shopNum,
dataOrg: org,
sortList: sortList
},
success: function (data) {
//这里的msg是json对象，不是json字符串。
$('#table').bootstrapTable('load', data);
console.log(data);
var flag1 = $("#keyword").val() != undefined;
var flag2 = $("#keyword").val() != null;
var flag3 = $("#keyword").val() != '';
if ( flag1&&flag2&&flag3) {
var txtReportName =$("#keyword").val();
var reg = new RegExp(txtReportName, 'ig');
var tableId = document.getElementById("table");
if (txtReportName != null) {
for (var i = 1; i < tableId.rows.length; i++) {
for (var j = 1; j < tableId.rows[i].cells.length; j++) {
var bb = tableId.rows[i].cells[j].innerHTML;
console.log(bb);
var displayColor = '<span style="color:#4e55ff">' + txtReportName + '</span>';
var cc = bb.replace(reg, displayColor);
tableId.rows[i].cells[j].innerHTML = cc;
}
}
}
}
}
});
});
function operateFormatter(value, row, index) {
return [
'<button type="button" class="btn icon-edit" data-toggle="modal" style="display:inline"/> ',
'<button type="button" class="btn icon-trash" data-toggle="modal" style="display:inline"/> '
].join('');
}
window.operateEvents = {
'click .icon-edit': function (e, value, row, index) {
window.location.href = "knowledge/queryKnowledgeById?Id=" + row.id;
},
'click .icon-trash': function (e, value, row, index) {
if (confirm("确认删除？")){
var Ids = new Array();
Ids.push(row.id);
window.location.href = "knowledge/deleteBatchByIds?Ids" + ids;
}
}
};
//请求成功方法
function responseHandler(result) {
var errcode = result.errcode;//在此做了错误代码的判断
if (errcode != 0) {
alert("错误代码" + errcode);
return;
}
//如果没有错误则返回数据，渲染表格
console.log(result.data);
return {
total: result.total, //总页数,前面的key必须为"total"
row: result.row//行数据，前面的key要与之前设置的dataField的值一致.
};
};
$(function () {
$('#table').bootstrapTable({
url: '/knowledge/queryKnowledgeAll',
pagination: true,
cache: false,
sidePagination: 'server',//指定服务器端分页
dataField: "row",
responseHandler: responseHandler,//请求数据成功后，渲染表格前的方法showFooter: true,//是否显示列脚
pageNumber: 1,//这默认页码
pageSize: 15, //每页的记录行数（*）
pageList: [5, 10, 25, 50],//可供选择的每页的行数（*）
uniqueId: "id",//每一行的唯一标识，一般为主键列
columns: [{
field: 'id',
title: 'Item ID',
visible: false
}, {
field: 'dataOrg',
title: '部门',
}, {
field: 'shopNum',
title: '商家编号',
}, {
field: 'productName',
title: '商品名称',
}, {
field: 'sortName',
title: '分类',
}, {
field: 'productFactory',
title: '生产厂家',
}, {
field: 'ask',
title: '问题',
}, {
field: 'answer',
title: '回答',
}, {
field: 'operate',
title: '操作',
align: 'center',
width: 100,
formatter: operateFormatter,
events: operateEvents
}]
})
})
最后附上官网api https://examples.bootstrap-table.com/