bootstrapTable表最后一行固定显示某些内容

最新推荐文章于 2023-12-12 13:31:10 发布

原创最新推荐文章于 2023-12-12 13:31:10 发布 · 5.5k 阅读

2 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用bootstrapTable插件创建一个带有排序、搜索、分页和列脚功能的高级表格。通过示例代码展示了如何设置表格的列、数据、样式以及各种配置选项。

直接上代码，红色为关键代码
$('#table').bootstrapTable('destroy').bootstrapTable({
    columns: [
    {
        field: '',
        title: '序号',
        formatter: function (value, row, index) {
            return index+1;
        }
    }, {
        field: 'name',
        title: '姓名',
        footerFormatter: function(data) {
            return '<div style="">总计</div>';
        },
    }, {
        field: 'department',
        title: '部门',
        footerFormatter: function(data) {
            return '<div style="">所有部门</div>';
        },
    },{
        field: 'loginCount',
        title: '登录次数',
        footerFormatter: function(data) { 
            return '<div style="">'+totalLoginCount+'</div>';
        },
    },{
        field: 'loginTime',
        title: '登录时间',
    }
    ],
    data:data,
    striped:true,
    sortName:sort_name,//按照这个排序
    sortOrder:'desc', //降序排列
    search:true, //搜索框
    pagination:true,  //设置为 true 会在表格底部显示分页条。
    paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
    pageList:[10,15,20],
    showFooter:true,//显示列脚
   
});

效果图如下：