(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()});
}