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', width: 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/