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) {
//重新加载table中的数据
$('#table').bootstrapTable('load', data);
}
});
});
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',
100,
formatter: operateFormatter,
events: operateEvents
}]
})
})
/** * 多条件查询（问题模糊查询、关键词模糊查询、商品名称模糊查询、 * 商家编号模糊查询、部门查询、种类Sort查询、分页查询） */ @RequestMapping("queryKnowledgeAll") @ResponseBody public PageUtil queryKnowledgeAll(String offset, String limit, KnowledgeBean knowledgeBean) { if (knowledgeBean.getDataOrg() != null && knowledgeBean.getDataOrg().equals("部门")) { knowledgeBean.setDataOrg(""); } Integer star = 0; Integer pagesize = 15; if (offset != null || limit != null) { star = Integer.valueOf(offset); pagesize = Integer.valueOf(limit); } PageInfo<KnowledgeBean> pageInfo = knowledgeService.queryKnowledgeAll(star, pagesize, knowledgeBean); PageUtil pageUtil = new PageUtil((int) pageInfo.getTotal(), pageInfo.getList()); return pageUtil; }
最后附上官网api https://examples.bootstrap-table.com/