bootstrap 표 만 들 기 bootstrapTable

html 코드:

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 = '  ';
                    return editBtn;
                }
            }],
        onLoadSuccess:function(data) {
            // console.log("data = " + JSON.stringify(data))
        },
        //             
          formatShowingRows:function(pageFrom, pageTo, totalRows)
          {
            return " "+pageFrom+"-"+pageTo+" ，  "+totalRows+" ";
          },
           //             
          formatRecordsPerPage:function(pageNumber)
          {
            return pageNumber+'   ';
          }
    });
}
  js 확장, 참조 링크:https://www.cnblogs.com/logspool/p/12846092.html