bootstrap 创建表格bootstrapTable

html代码：

<table id="programListTable" class="table table-bordered table-striped" data-show-columns="false"></table>

js具体代码:

//加载列表
function createProgramlistTable(){
    $("#programListTable").bootstrapTable('destroy');
    $("#programListTable").bootstrapTable({
        url : '/programApi?command=select_program_list',  //action请求
        pagination : true, //是否显示分页
        title: '节目单',
        titleTooltip: '节目单',
        striped : true, //是否显示行间隔色
        search :false, //是否启用搜索框
        sortOrder :"asc",//排序方式
        sortName :"id",//排序方式
        queryParamsType : '',
        showExport: true,                     //是否显示导出
        exportDataType: "basic",              //basic', 'all', 'selected'.
        queryParams : function(param){
            var temp = {    //里面键的名字和控制器中变量名一致，改动要同步
                pageNumber:param.pageNumber,//页码
                pageSize:param.pageSize,    //页面大小，默认为10行
                name:$("#searchName").val(), //查询账号信息，可为空
                roleId:$("#groupSelect").val(), //查询角色信息，可为空
                parentId:null,
                sortName:this.sortName,
                sortOrder:this.sortOrder
            };
            return temp;
        },
        cache : false, //是否使用缓存，默认为true 一般情况需要设置(*)
        pageNumber : 1,
        pageSize : 20,
        pageList : [ 10, 30, 50 ,100],//可选的每页数据
        toolbar : "#toolbar",// 工具栏按钮
        showColumns : false, // 显示隐藏列
        showRefresh : false, // 显示刷新按钮
        uniqueId : "id", // 每一行的唯一标识
        sidePagination : "server", // 分页方式：client客户端分页，server服务端处理分页(*)
        dataType : "json", //期望返回类型
        dataFiled : "rows",
        minimumCountColumns : 2,//最小允许列数
        clickToSelect :false,//是否允许点击选中行
        columns : [
            {
                title : 'id',
                field : 'id', // 字段
                align : 'center', // 对齐方式（左 中 右）
                valign : 'middle',
                width : '5%',
                visible: false
            },
            {
                title : '节目单名称',
                field : 'name',
                align : 'left',
                valign : 'middle',
                sortable : true ,
                width : '10%',
                formatter: function (value, row, index) {
                    return value;
                }
            },
            {
                title : '播出日期',
                field : 'playdate',
                align : 'left',
                valign : 'middle',
                sortable : true ,
                width : '10%',
                formatter: function (value, row, index) {

                    return value;
                }
            },
            {
                title : '状态',
                field : 'status',
                align : 'left',
                valign : 'middle',
                sortable : true ,
                width : '10%',
                formatter: function (value, row, index) {
                    var valueStr = "回放";
                    if (value == 0) {
                        valueStr = "禁用";
                    }else if (value == 2) {
                        valueStr = "直播中";
                    }
                    return value;
                }
            },
            {
                title : '时长',
                field : 'duration',
                align : 'center',
                valign : 'middle',
                width : '7%',
                formatter: function (value, row, index) {
                    return value;
                }
            },
            {
                title : '创建时间',
                field : 'createtime',
                align : 'center',
                valign : 'middle',
                // sortable : true ,
                width : '13%'
            },
            {
                title : '操作',
                field : 'action',
                align : 'center',
                valign : 'middle',
                width : '7%',
                formatter: function (value, row, index) {
                    // return value;
                    var editBtn = '<button class="btn btn-primary btn-flat btn-xs" onclick="editClick(' + JSON.stringify(row).replace(/\"/g,"'") + ')" data-toggle="modal" >修改</button>';
                    return editBtn;
                }
            }],
        onLoadSuccess:function(data) {
            // console.log("data = " + JSON.stringify(data))
        },
        //自定义分页字符串显示为中文
          formatShowingRows:function(pageFrom, pageTo, totalRows)
          {
            return "第"+pageFrom+"-"+pageTo+"行，总共"+totalRows+"行<span style='margin-left: 30px;'></span>";
          },
           //自定义分页字符串显示为中文
          formatRecordsPerPage:function(pageNumber)
          {
            return pageNumber+'行每页';
          }
    });
}

 

js扩展，参考链接：

https://www.cnblogs.com/logspool/p/12846092.html