您的位置:首页 > Web前端 > BootStrap

bootStrap table 使用

2017-12-05 19:55 387 查看
html:
<table id="listTable"
class="table table-striped table-bordered table-hover text-center">
<thead>
<tr class="info">
<th class="text-center" data-field="index" >序号</th>
<th class="text-center" data-field="collegeName">院系</th>
<th class="text-center" data-field="cataCount">专业</th>
<th class="text-center" data-field="createDate">创建时间</th>
<th class="text-center tdLine-nowrap"
data-formatter="operateFormatter"
data-events="operateEvents"><i
class="fa fa-fw fa-cog txt-color-blue hidden-md hidden-sm hidden-xs"></i>
操作</th>
</tr>
</thead>
</table>

js:

$(document).ready(function() {
// 初始化列表
initTable();

//查询事件(初始化列表参数为空,查询时传入查询参数)
$("#search").on("click", function(){
$('#listTable').bootstrapTable('selectPage', 1);
});
});

// 初始化列表
function initTable() {
// 初始化列表
var table = $('#listTable').bootstrapTable({
url : getContextPath() + '/training/deplist',
method : 'GET',
striped: true,  //表格显示条纹
pagination : true,//在表格底部显示分页工具栏
sidePagination : 'server',//表格分页的位置(服务端)
cache: false, //是否使用缓存,默认为true
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize : 10, //每页显示记录条数
pageList: [5, 10, 15, 20, 25],//记录数可选列表
uniqueId : 'id',//每一行的唯一标识,一般为主键列
undefinedText : '',
queryParams : function(params) {//查询参数,每次调用是会带上这个参数,可自定义
params.collegeName = $("#depart").val();// 院系名称
return params;
},
responseHandler : responseHandler,
//在表体上渲染并在DOM中可用。
onPostBody : function() {
//resetView : 重置引导表视图,例如重置表高度。
$('#listTable').bootstrapTable("resetView");
//操作按钮鼠标经过显示   popover:启用弹出框  trigger() 方法触发被选元素的指定事件类型。
$("a").popover({
trigger : 'hover'
});
}
});

//根据窗口调整表格高度 resize : 当调整浏览器窗口的大小时,发生 resize 事件。
// $(window)  Window 对象表示一个浏览器窗口或一个框架。
$(window).resize(function() {
$('#listTable').bootstrapTable('resetView');
});

// 操作事件
window.operateEvents = {
// 编辑
'click .edit' : function(e, value, row, index) {
getInfo(row.uscId,row.collegeName, "EDIT");
},
'click .delete' : function(e, value, row, index) {
deleteConfig(row.uscId, "DELETE");
}
};
}
//设置列表数据
function responseHandler(res) {
if ("success" == res.RET_CODE && res.rows != null) {
$.each(res.rows, function(i, row) {
row.index = res.pageIndex + i + 1;
});
return res;
} else {
return res;

}
}

// 列表操作列格式化
function operateFormatter(value, row, index) {
var content = '<a class="edit" '
+ ' rel="popover-hover" data-placement="top" data-content="编辑" '
+ ' href="javascript:void(0)"> ' + ' 编辑 ' + ' </a> '
+ '<a class="delete" '
+ ' rel="popover-hover" data-placement="top" data-content="删除" '
+ ' href="javascript:void(0)"> ' + ' 删除 ' + ' </a> '
return content;
}
后台:

bootstrap-table要求服务器返回的json须包含:totlal,rows
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: