效果图如下:
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#dailyContentTable').bootstrapTable({
url: '${pageContext.request.contextPath}/dailyContent/initTable', //请求后台的URL(*)
striped: true, //表格显示条纹
pagination: true, //启动分页
toolbar: "#toolbar", //工具按钮用哪个容器
pageSize: 10, //每页显示的记录数
pageNumber: 1, //当前第几页
pageList: [30, 40, 80], //记录数可选列表
search: true, //是否启用查询
showColumns: true, //显示下拉框勾选要显示的列
showRefresh: true, //显示刷新按钮
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
//设置为limit可以获取limit, offset, search, sort, order
//queryParamsType: "undefined",
queryParamsType : 'undefined',
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
searchText:params.searchText
};
return param;
},
columns: [
{checkbox: true},
{field: 'content', title: '内容', sortable: true},
{field: 'dailyType', title: '类型', sortable: true},
{field: 'button', title: '操作', events: "operateEvents", formatter: operateFormatter}
],
onLoadSuccess: function () { //加载成功时执行
// alert("加载成功");
},
onLoadError: function () { //加载失败时执行
// alert("加载数据失败");
}
});
};
return oTableInit;
};
Spirng控制器
@RequestMapping("initTable")
@ResponseBody
public String initTable(String searchText,@RequestParam Integer pageNumber,@RequestParam Integer pageSize){
PageHelper.startPage(pageNumber, pageSize);
List<DailyContent> list = dailyContentService.selectByQueryParams(searchText);
PageInfo pageInfo = new PageInfo(list);
return "{\"total\":" + pageInfo.getTotal() + ",\"rows\":" + JSONObject.toJSON(pageInfo.getList()) + "}";
}
mybatis mapper
<select id="selectByQueryParams" parameterType="java.lang.String" resultMap="BaseResultMap">
select ID, CONTENT, DAILY_TYPE, CREATE_TIME, CREATE_USER
from daily_content
WHERE CONCAT(IFNULL(`CONTENT`,''),IFNULL(`DAILY_TYPE`,'')) LIKE '%${search}%'
</select>