(function () {
var BSTable = function (bstableId, url, columns,queryParamsType,countSize) {
this.btInstance = null; //jquery和BootStrapTable绑定的对象
this.bstableId = bstableId;
this.url = url;
this.method = "post";
this.paginationType = "server"; //默认分页方式是服务器分页,可选项"client" 如果 设置 sidePagination: "server", 必须包含 total 和 rows; 如果直接返回的是数组 需要设置为 sidePagination: "client"
this.toolbarId = bstableId + "Toolbar";
this.columns = columns;
this.height = 665;
this.data = {};
this.queryParams = {}; // 向后台传递的自定义参数
if (countSize==undefined){
this.countSize=10;
}else{
this.countSize=countSize;
}
if(queryParamsType==undefined){
this.queryParamsType='limit'
}else{
this.queryParamsType=queryParamsType
}
};
BSTable.prototype = {
/**
* 初始化bootstrap table
*/
init: function () {
var tableId = this.bstableId;
var me = this;
this.btInstance =
$('#' + tableId).bootstrapTable({
contentType: "application/x-www-form-urlencoded",
url: this.url, //请求地址
method: this.method, //ajax方式,post还是get
ajaxOptions: { //ajax请求的附带参数
data: this.data
},
toolbar: "#" + this.toolbarId,//顶部工具条
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
// sortOrder: "desc", //排序方式
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: this.countSize, //每页的记录行数（*）
pageList: [10, 20, 50,100], //可供选择的每页的行数（*）
queryParamsType: this.queryParamsType, //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
queryParams: function (param) {
if(this.queryParamsType=='limit'){
return $.extend(me.queryParams, param);
}else{
//因为layui table 传参不一样
return $.extend(me.queryParams, {
'page':param.pageNumber,
'limit':param.pageSize
});
}
}, // 向后台传递的自定义参数
sidePagination: this.paginationType, //分页方式：client客户端分页，server服务端分页（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
strictSearch: true, //设置为 true启用 全匹配搜索，否则为模糊搜索
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
columns: this.columns, //列数组
// height: this.height,
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
iconSize: 'outline'
});
return this;
},
/**
* 向后台传递的自定义参数
* @param param
*/
setQueryParams: function (param) {
this.queryParams = param;
},
/**
* 设置分页方式：server 或者 client
*/
setPaginationType: function (type) {
console.log(type)
this.paginationType = type;
},
setHeight: function (type) {
this.height = type;
},
/**
* 设置ajax post请求时候附带的参数
*/
set: function (key, value) {
if (typeof key == "object") {
for (var i in key) {
if (typeof i == "function")
continue;
this.data[i] = key[i];
}
} else {
this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
}
return this;
},
/**
* 设置ajax post请求时候附带的参数
*/
setData: function (data) {
this.data = data;
return this;
},
/**
* 清空ajax post请求参数
*/
clear: function () {
this.data = {};
return this;
},
/**
* 刷新 bootstrap 表格
* Refresh the remote server data,
* you can set {silent: true} to refresh the data silently,
* and set {url: newUrl} to change the url.
* To supply query params specific to this request, set {query: {foo: 'bar'}}
*/
refresh: function (parms) {
if (typeof parms != "undefined") {
this.btInstance.bootstrapTable('refresh', parms);
} else {
this.btInstance.bootstrapTable('refresh');
}
}
};
window.BSTable = BSTable;
}());
1.使用方法 把封装好的js 引入到页面中
var pageObj={
table:null,
id:"exampleTable",//要渲染的table id
url: "", //请求路径
}
/*
*初始化表格的列
* */
pageObj.initColumn = function () {
return[
{
field: 'username',
title: '名字',
align: 'center',
},
]
}
//设置传参
pageObj.formParams = function () {
var queryData = {};
queryData['searchWord'] = $("#searchWord").val();
return queryData;
};
$(function () {
load();
});
//初始化表格
function load() {
var defaultColunms = pageObj.initColumn();
var table = new BSTable(pageObj.id, pageObj.url, defaultColunms);
pageObj.table = table.init();
}
//reLoad 更新表格
function reLoad() {
pageObj.table.refresh({query: pageObj.formParams()});
}