bootstrapTable 实现加载本地数据分页 load sidePagination

最新推荐文章于 2020-11-27 09:53:59 发布

Mk_zzl

最新推荐文章于 2020-11-27 09:53:59 发布

阅读量1.5k

点赞数

分类专栏： Java 文章标签： bootstrap html javascript jquery

本文链接：https://blog.csdn.net/Mk_zzl/article/details/106827932

版权

Java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需要注意的点：
BootstrapTable 分页属性(sidePagination)设置错误导致数据无法渲染
如果是‘server’，则需要添加上分页参数（后端分页）
如果是‘client’，则不需要添加上分页参数（前端分页）
链接：
https://blog.csdn.net/xueshr/article/details/89402393?utm_medium=distribute.pc_relevant
.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant
.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

页面代码
<div class="col-sm-6" style="padding-top: 46px">
    <table id="selectTable"></table>
</div>

js代码
Common.initTable({
    table: $websiteTable,
    url: '/analyze/websiteTask/list',
    toolbar: '#toolbar',
    contentType:'application/x-www-form-urlencoded; charset=UTF-8',
    queryParams: function(params) {
        params.firstWebsiteId = $('select[name="firstWebsiteId"]').find("option:selected").val();
        params.secondWebsiteId = $('select[name="secondWebsiteId"]').find("option:selected").val();
        params.websiteId = $('select[name="websiteId"]').find("option:selected").val();
        params.ids = getSelectIdsStr();
        params.websiteName = $queryForm.find('input[name="websiteName"]').val();
        return params;
    },
    columns: [
        {
            field: 'name',
            title: '网站名称',
            align: 'center',
        },
        {
            field: 'classify1Name',
            title: '网站一级分类',
            align: 'center',
        },
        {
            field: 'classify2Name',
            title: '网站二级分类',
            align: 'center',
        },
        {
            title: '操作',
            align: 'center',
            events: window.operateEvents,
            formatter: formatterFnc.customBtns
        }
    ]
});

封装的js的代码
Common.initTable = function (options) {
    var $table = $(options.table);
    $table.bootstrapTable({
        //height: 550,
        url: options.url,
        method: 'post',
        toolbar: options.toolbar,
        showColumns: !options.showColumns ? options.showColumns : true,
        contentType: options.contentType ? options.contentType : 'application/json',
        pagination: true,
        sidePagination: 'server',
        pageSize: options.pageSize ? options.pageSize : 10,
        pageList: options.pageList ? options.pageList : [5, 10, 25, 50, 100],
        totalField: 'total',
        dataField: 'list',
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        queryParamsType: '',
        queryParams: options.queryParams,

        classes: 'table table-bordered table-hover',
        columns: options.columns
    });
};

如果数据在在前台没有设置total，则需要‘client’

js代码：这是是拼接了 一个对象，用于生成表格中的数据
window.operateEvents = {
    'click .edit': function (e, value, row) {
        //新建一个对象，把页面的选中的id和name放入对象中
        var obj = new Object();
        obj.id=row.id;
        obj.name=row.name;
        obj.classify1Name=row.classify1Name;
        obj.classify2Name=row.classify2Name;
        $selectIds.push(obj);
        $websiteTable.bootstrapTable('refresh',{pageNumber:1});
        $selectTable.bootstrapTable('load', $selectIds);
    }
};