BootStrap table 传递搜索参数、分页序号递增

最新推荐文章于 2022-04-24 18:34:27 发布

girljunjie

最新推荐文章于 2022-04-24 18:34:27 发布

阅读量6k

点赞数 1

分类专栏：前端文章标签： bootstrapTable 前端表格

本文链接：https://blog.csdn.net/girljunjie/article/details/79010224

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.查询条件，有个queryParams属性。

  $('#allDataTable').bootstrapTable({
            method: 'get',
            queryParams:queryParams,
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: false, //是否启用排序
            sortOrder: "asc", //排序方式
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 30, //每页的记录行数（*）
            pageList: [30], //可供选择的每页的行数（*）
            url: URL, //这个接口需要处理bootstrap table传递的固定参数
            queryParamsType: '',
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            strictSearch: true,
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            searchOnEnterKey: true,
            columns: [{
                    field: 'id',
                    formatter: function (value, row, index) {
                        if (!row.id) {
                            return '暂无';
                        } else {
                            return row.id;
                        }
                    }
                }],
        });

    });

    function queryParams(pageReqeust) {  
        pageReqeust.stat = $('#sta_day').val() ;  //
        pageReqeust.name = $('#username').val(); 
        console.log(pageReqeust);
        return pageReqeust;  
    }

2.点击搜索按钮，进行搜索，调用refresh。

  function refresh() {
        $('#allDataTable').bootstrapTable('refresh',  {query: {pageNumber:1}});
    }

3.分页参数递增

columns:[{
            field: 'number',
            title: '序号',
            width:5 ,
            align:'center',
            switchable:false,
            formatter:function(value,row,index){
                //return index+1; //序号正序排序从1开始
                var pageSize=$('#tableId').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                var pageNumber=$('#tableId').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
            }
        }]