html ps: 我用的引擎模板不是jsp 而是thymeleaf
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 [ ' ', ' ' ].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 pageInfo = knowledgeService.queryKnowledgeAll(star, pagesize, knowledgeBean); PageUtil pageUtil = new PageUtil((int) pageInfo.getTotal(), pageInfo.getList()); return pageUtil; }
最后附上官网api https://examples.bootstrap-table.com/