bootstrap-table 前端使用总结

//需要引入的文件
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script src="/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap-table.js">
// html
<table id="table_server" ></table>
// js
// 先销毁table
$('#table_server').bootstrapTable('destroy');
$("#table_server").bootstrapTable({
url: url,
method: 'get',
dataType: "json",
striped: true,//设置为 true 会有隔行变色效果
undefinedText: "暂无数据",//当数据为 undefined 时显示的字符
pagination: true, //分页
showToggle: false,//是否显示 切换试图（table/card）按钮
showColumns: false,//是否显示 内容列下拉框
pageNumber: 1,//如果设置了分页，首页页码
pageSize: 100,//如果设置了分页，页面数据条数
pageList: [50, 100],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
paginationPreText: '<',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '>',//指定分页条中下一页按钮的图标或文字,这里是>
paginationLoop: false,
search: false, //显示搜索框
data_local: "zh-US",//表格汉化
height:'600',
sidePagination: "server", //服务端处理分页
queryParams: function (params) {
//自定义参数，这里的参数是传给后台的
return {
//这里的params是table提供的
pageNumber: params.offset,//从数据库第几条记录开始
pageSize: params.limit,//找多少条
type:"2" // 自定义的参数，后台需要的
};
},
onLoadSuccess: function(){
//加载成功时执行 跳转到指定页码
$('.pageBtn').click(function(){
toPage()
})
},
idField: "key",//指定主键列
columns: [{
title: 'Url',//表的列名
field: 'key',//json数据中rows数组中的属性名
align: 'center',//水平居中,
formatter:function(value, row, index){
return ('<a href='+value+'style="display:block">'+value+'</a>')
}
}]
});

// 跳转到指定页码
function toPage() {
var pageNum = $("#pageNum").val();
if (pageNum) {
$('#table_server').bootstrapTable('selectPage', parseInt(pageNum));
}
}

// bootstrap-table.js 里找到 class="pagination'
//把
html.push('</div>',
'<div class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="#">' + this.options.paginationPreText + '</a></li>');
//改为
html.push('</div>',
'<div class="goPage"><input type="button" value="跳转" class="pageBtn" ></div>',
'<div class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</div>',
'<div class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');
// bootstrap-table.css里添加（这个可以根据需要添加）
.pageNum {
width: 40px;
border-radius: 3px;
}
.goPage {
float: right;
margin-left: 5px;
margin-top: 13px;
height: 30px;
}
// 要实现的功能在上面js里已经展示