bootstrap table queryParams 与 queryParamsType “limit”使用

最新推荐文章于 2025-05-10 13:08:45 发布

置顶 javabro

最新推荐文章于 2025-05-10 13:08:45 发布

阅读量1.1w

点赞数

分类专栏： bootstrap 文章标签： bootstrap table

本文链接：https://blog.youkuaiyun.com/javaBro/article/details/81872755

版权

bootstrap 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了在Bootstrap Table中如何正确配置queryParams和queryParamsType，以确保在自定义查询时能获取到limit, offset, search, sort, order等参数。通过查询按钮事件和detailFormatter的使用示例，阐述了这两个参数的重要性和实际应用中的注意事项。" 135327991,15375167,寻找最优路测线的二分DFS算法解析与实现,"['算法', '二分查找', '深度优先搜索', '路径优化', '网格问题', '编程语言实现']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$table.bootstrapTable({
    url: ,
   queryParams:queryParams,
    queryParamsType : "limit",
    height:'getHeight' ,
    striped: true,
    showRefresh: true,
    showColumns: false,
    order: "asc",                    //  需要配置 否则 是undefined
    minimumCountColumns: 2,
    clickToSelect: true,
    detailView: true,               //看过一篇关于父子表重新构造table的例子、
    detailFormatter: detailFormatter,  //我重写了这个 看下面
    pagination: true,
    paginationLoop: false,
    sidePagination: 'server',
    silentSort: false,
    silent:true,
    sortable: true,                 //列排序
    sortName:'',                    // 需要配置 否则 是undefined
    smartDisplay: false,
    escape: true,
    searchOnEnterKey: true,
    idField: '',
    uniqueId:'',
    limit:1,                       // 需要配置 否则 是undefined
    offset: 10                     // 需要配置 否则 是undefined

上面所有加了注释的 // 需要配置 必须项否则自写的查询中对应的 limit, offset, search, sort, order 参数取不到，

queryParams 参考：

function queryParams(params){    
    var param = {
        offset: params.offset,
        limit: params.limit,
        sort: params.sort,
        order: params.order,
       // search:params.search,
       //可以是添加自己要帅选的列与pojo 属性对应
    };

    return param;
}

/**
*  2019-02-20  更新
*此方法你可以在第一次加载必要参数查询后的具体筛选参数
*此方法可绑定到bootstrapTable  toolbar中DOM元素中
*/
function queryBtn(){

  //此方法 可传递相关参数 一般传递            query：{接收参数名:'value值',接收参数名:'value值'}
  $('#table的ID名').bootstrapTable('refresh'，{query:{ /*注释说明*/}})
    
    
}

查询按钮事件：

<button type="button" id="自己起名" class="btn btn-default ">开始搜索</button>
$(document).on('click', "#与上面buttonID对应",function(){ $('#table').bootstrapTable('refresh' ); });

detailFormatter:

function detailFormatter(index, row){
    var html = [];
    html.push('自写html');
    $.each(row, function (key, value) {
        if(key!='id'||key!='ck') {      //key 列  value  列对应值  此处没有向用户展示ID列信息以及过滤了checkbox 列
            switch (key) {
                /**/

                     }

               }

     })
     html.push('自写html');
    return html.join('');

}

2019-4-8 更新实际使用中发现：

table 的   clickToSelect（点击选中行）  属性 和属性 同时设置时候如何 点击表格空白处 js会抛出错误！ 但是不配置 table属性 
clickToSelect时候 点击选中不起作用！

更新 于 2019-5-17 
   对table  设定 clickToSelect=true 之后，列属性设定clickToSelect:false （该属性点击选中行）可能引起报错原因解释！
table columns片段示例：
  {field: 'ck', checkbox: true},  {field: 'ck',formatter:'自定义函数',title:'序号',clickToSelect: false } 
造成js报错的原因是 field  绑定了同一个 实体属性 如上  同为ck 如 操作列 其他实现 用 formatter(value,row,index) row 取对应 属性值 。

完结！