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扩展,参考链接: