莫辂技术
今天是:
我需要三件东西:爱情友谊和图书。然而这三者之间何其相通!炽热的爱情可以充实图书的内容,图书又是人们最忠实的朋友。
User Image bootstrap 表格实现所有字段模糊查询 2018-12-03

效果图如下:

  • 表格初始化

$(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>

 

45 likes - 2 comments

我的

类型标签

外部链接

网站访问总量