基于jQuery的表格生成器（自定义、带分页）
华化
JS
/**
* @summary table
* @desc 基于jQuery的列表生成器
* Changelog：
*/
;
(function ($) {
"use strict";
/**
* 默认参数集
*/
var defaults = {
width: 1000,
notHight: 340,
moreHeight:0,
freezeColNum: 1, /**冻结列数 || @type int 默认 1*/
isCheckbox: true,/** * 是否显示复选框 */
isOrder: true, /** * 是否显示序号 */
isoperate:true,
template:1,/** * 模板 默认1 通用列表 2 没有滚动条 背景透明 3 弹出列表（灰色） 9 只有分页 10 特殊列表 没有hover颜色 */
hiddenCols: [], /**隐藏列 hiddenCols:["id","xx"] */
isSetTitle:true,
/**
* 列表头数据
* name:"" 名称
* width："" 宽度
* istitle:true,是否显示title
* issort:false 是否显示排序 desc 降序 ， asc 升序
*
*/
titles: [],
datas: [],/** * 列数据 */
operate: [], /**操作组 */
batchButton: [], /**批量操作组 */
ispage: true, /** 是否显示分页，默认显示 @type boolean */
total:0,
pageFn: function (pageIndex, pageSize) {}, /**分页回调*/
sortFn:function(v){}, /**排序回调 */
};
/**
* @constructor
* 插件初始化
* @param {Object} event - 插件的初始化元素。
* @param {Object} option - 初始化参数
*/
var table = function (event, option) {
this.setOption(option);
this.setCssClass();
this.setProp();
//考核列表设置
if(option.template == 1) {
var state = 0;
try{
state = sessionStorage.getItem("HCZT");
if(option.isSetTitle)$(".mt50.fontSE24").text(customQueryTitleName);
if (state == 1) {
this.option.isoperate = false;
this.option.operate = option.operate = [];
this.option.isCheckbox = option.isCheckbox = false;
$(".table-search-box .fn-right").remove();
}
}
catch(e){}
}
if(option.template == 9) this.pageHtml(event);
else{
if (option.isCheckbox) this.prop.outFreezeColWidth += this.prop.tdWidth;
if (option.isOrder) this.prop.outFreezeColWidth += this.prop.orderWidth;
if (option.operate.length > 0) this.prop.outFreezeColWidth += this.prop.opTdWidth;
this.setElem();
this.title();
(option.datas.length > 0) && (this.showData(event));
(option.ispage) && this.pageHtml(event);
$(event).append(this.elem.box);
$(event).append(this.elem.fixedTable);
(option.batchButton.length>0) && $(event).append(this.batchButtonHtml());
this.eOperate();
this.tableCalculate();
this.oSort();
this.eBatch();
}
};
/**
* 插件缓存内部对象的KEY
*/
table.dataKey = 'tableObject';
/**
* 参数初始化
* @param {Object} option - 参数集
*/
table.prototype.setOption = function (option) {
this.option = $.extend(true, {}, defaults, option);
};
/**
* CSS样式表名称字义
*/
table.prototype.setCssClass = function () {
var css_class = {
table_box: 'list_wap',
table_header_wraper: 'title-box',
table_body: 'content-box',
fixed_table_left_header: 't-fixed',
table_header: 't-vary',
fixed_table_left_box: 'fixed_table_left_box',
fixed_table_left_content: 'c-fixed',
fixed_table_left_body: 'c-vary',
operates: 'feature-box fn-clear',
batchs: 'batchs fn-clear',
check_box:'table-check-box',//复选框
check_box_choose:'table-checked-box', //选中复选框
};
this.css_class = css_class;
};
/**
* 插件内部属性设置默认值
*/
table.prototype.setProp = function () {
this.prop = {
tdWidth: 40, //td复选框默认宽度
orderWidth: 50,//序号默认宽度
opTdWidth: 72,//操作项默认宽度
outFreezeColWidth: 0, //冻结列总宽度
colHeight: 36, //列高
noTableHeight: 200, //不属于列表的高度
colWidthHtml: '', // 表格宽度DOM
fixedColWidthHtml: '', // 冻结表格宽度DOM
pageIndex: 1,
pageSize: 10,
pageCount: 0, //分页总页数
showTdCodes: [],//title显示的code
fixedShowTdCodes: [],//冻结title显示的code
hiddenDatas: {},
sortDatas: {}
};
};
/**
* 生成表格宽度
* @param [] array
*/
var colWidthHtml = function (array) {
var colWidthHtml = "<colgroup>";
array.forEach(element => {
colWidthHtml += '<col style="width: ' + element + 'px;" />';
});
colWidthHtml += '</colgroup>';
return colWidthHtml;
}
/**
* 生成表格头部
*/
table.prototype.tableTitleHtml = function (datas,type) {
var self = this,
p = this.option;
var rowHtml = '',
widthArray = [];
var checkBox = '<th><i class="iconfont table-check-box"></i></th>';
var orderHtml = '<th><span class="SN fontSE20">SN.</span></th>';
var sortHtml = '';
datas.forEach(element => {
sortHtml = "";
switch (element.issort) {
case true:
sortHtml = '<span class="sort" param="'+(element.orderfield || element.code)+'"><i class="iconfont sort-up"></i><i class="iconfont sort-down"></i></span>';
break;
case "desc":
self.prop.sortDatas[(element.orderfield || element.code)] = "desc";
sortHtml = '<span class="sort desc" param="'+(element.orderfield || element.code)+'"><i class="iconfont sort-up"></i><i class="iconfont sort-down"></i></span>';
break;
case "asc":
self.prop.sortDatas[(element.orderfield || element.code)] = "asc";
sortHtml = '<span class="sort asc" param="'+(element.orderfield || element.code)+'"><i class="iconfont sort-up"></i><i class="iconfont sort-down"></i></span>';
break;
}
rowHtml += '<th>' + element.name + sortHtml + '</th>';
widthArray[widthArray.length] = element.width;
//保存需要显示数据Code
element.istitle = typeof (element.istitle) =="undefined" ? true : element.istitle;
switch (type){
case "fixed": self.prop.fixedShowTdCodes[self.prop.fixedShowTdCodes.length] = element; break;
default: self.prop.showTdCodes[self.prop.showTdCodes.length] = element; break;
}
});
//判断是否有操作组
if(p.operate.length > 0){ rowHtml = '<th>操作</th>' + rowHtml, widthArray.splice(0, 0, self.prop.opTdWidth); }
//判断是否有序号
(p.isOrder) && (rowHtml = orderHtml + rowHtml, widthArray.splice(0, 0, self.prop.orderWidth));
//判断是否显示复选框
(p.isCheckbox) && (rowHtml = checkBox + rowHtml, widthArray.splice(0, 0, self.prop.tdWidth));
rowHtml = '<tr>' + rowHtml + '</tr>';
switch (type){
case "fixed": self.elem.fixedColWidthHtml = colWidthHtml(widthArray); rowHtml = self.elem.fixedColWidthHtml + rowHtml; break;
default: self.elem.colWidthHtml = colWidthHtml(widthArray); rowHtml = self.elem.colWidthHtml + rowHtml; break;
}
// self.elem.colWidthHtml = colWidthHtml(widthArray);
return rowHtml;
}
/**
* 生成表格数据
* @param {*} datas
* type 类型 freeze： 冻结数据
*/
table.prototype.tableDataHtml = function (type) {
var self = this,
p = this.option;
var hiddenDatas = {};
var fixedDataHtml = "",
td = "";
p.datas.forEach(function(val,index){
const obj = val;
td = "";
//判断是否显示复选框
if (p.isCheckbox) td += '<td><i class="iconfont table-check-box"></i></td>';
//判断是否有序号
if (p.isOrder) td += '<td class="font-number-en fontSE20">'+obj.rn+'</td>';
//判断是否为本人操作
if(typeof(obj.crt_userid) != "undefined" && sessionStorage.userid != obj.crt_userid){
if(typeof(obj.notOperate) == "undefined"){ obj.notOperate = []; }
obj.notOperate.push("删除");
obj.notOperate.push("修改");
}
//判断是否有操作组
if (p.operate.length > 0) td += '<td class="operate-td"><div class="operate-box">' + self.operateHtml(obj.notOperate) + '</div></td>';
//加载隐藏数据
$.each(p.hiddenCols, function (i, n) {
hiddenDatas[n] = obj[n];
});
var xbStr = "" ,ryztStr = "";
//加载数据
switch (type) {
case "freeze":
$.each(self.prop.fixedShowTdCodes, function (i, n) {
if (i < p.freezeColNum) {
if(n.code == "xm") {
xbStr = "";ryztStr ="";
if(typeof(obj.xb) != "undefined") xbStr = obj.xb == "1" ? '<i class="list-sex iconfont fontCR06"></i>': obj.xb == "2" ? '<i class="list-sex iconfont fontCR07"></i>':"<i class='list-sex iconfont'></i>";
if(obj.ryzt=="11") ryztStr = '<label class="fontSE12 list-status-history">历史</label>';
if(obj.rylb=="2")ryztStr += '<label class="fontSE12 list-status-history">代管</label>';
td += '<td title="' + obj[n.code] + '"><div class="box-flex" style="align-items: center;"><a class="pointer mr10" onclick="openPersonDetailHtml(\''+obj.rybh+'\');">' + obj[n.code] + '</a>'+ryztStr+xbStr+'</div></td>';
return true;
}
td += '<td title="' + (n.istitle ? obj[n.code] : "") + '">' + obj[n.code] + '</td>';
}
});
break;
default:
$.each(self.prop.showTdCodes, function (i, n) {
if(n.code == "xm") {
xbStr = "";ryztStr ="";
if(typeof(obj.xb) != "undefined" && obj.xb!="") xbStr = obj.xb == "1" ? '<i class="iconfont fontCR06"></i>': obj.xb == "2" ? '<i class="iconfont fontCR07"></i>':"";
if(obj.ryzt=="11") ryztStr = '<label class="fontSE12 list-status-history">历史</label>';
if(obj.rylb=="2")ryztStr += '<label class="fontSE12 list-status-history">代管</label>';
td += '<td title="' + obj[n.code] + '"><div class="box-flex" style="align-items: center;"><a class="pointer mr10" onclick="openPersonDetailHtml(\''+obj.rybh+'\');">' + obj[n.code] + '</a>'+ryztStr+xbStr+'</div></td>';
return true;
}
td += '<td title="' + (n.istitle ? obj[n.code] : "") + '">' + obj[n.code] + '</td>';
});
break;
}
fixedDataHtml += "<tr class='tr"+index+"' param='" + JSON.stringify(hiddenDatas) + "'>" + td + "</tr>";
})
return fixedDataHtml;
}
/**
* 插件HTML结构生成
*/
table.prototype.setElem = function () {
var self = this,
p = this.option;
// 1. 生成、替换DOM对象
var elem = {}; //本体
elem.header = $('<div>').addClass(this.css_class.table_header_wraper);
elem.fixedHeaderTable = $('<div><table>').addClass(this.css_class.fixed_table_left_header);
elem.headerTable = $('<div><table>').addClass(this.css_class.table_header);
elem.body = $('<div>').addClass(this.css_class.table_body);
elem.fixedBodyTable = $('<div><table>').addClass(this.css_class.fixed_table_left_content);
elem.bodyTable = $('<div><table>').addClass(this.css_class.fixed_table_left_body);
elem.box = $('<div>').addClass(this.css_class.table_box + " " + this.css_class.table_box+p.template);
$(elem.header).append(elem.fixedHeaderTable);
$(elem.header).append(elem.headerTable);
$(elem.body).append(elem.fixedBodyTable);
$(elem.body).append(elem.bodyTable);
$(elem.box).append(elem.header).append(elem.body);
this.elem = elem;
$(elem.headerTable).find("table").append(self.tableTitleHtml(p.titles));
};
/**
* 添加冻结表头
*/
table.prototype.title = function(){
var self = this,
p = this.option;
//表头数据
var fixedTitleDatas = [];
for (const i in p.titles) {
if (i < p.freezeColNum) {
fixedTitleDatas[i] = p.titles[i];
self.prop.outFreezeColWidth += parseInt(p.titles[i].width);
}
}
$(self.elem.fixedHeaderTable).find('table').html(self.tableTitleHtml(fixedTitleDatas,"fixed")).css("width", self.prop.outFreezeColWidth);
}
/**
* 冻结数据
*/
table.prototype.freezeColData = function () {
var self = this;
//数据内容
var fixedDataHtml = self.tableDataHtml("freeze");
$(self.elem.fixedBodyTable).find('table').html(self.elem.fixedColWidthHtml + fixedDataHtml).css("width", self.prop.outFreezeColWidth);
}
/**
* 添加数据
*/
table.prototype.showData = function (event) {
var self = this,
p = this.option;
if(p.datas.length == 0){ $(self.elem.body).find(".c-fixed table").html(""); $(self.elem.body).find(".c-vary table").html('<tr><td colspan="17" style="text-align: center;">无数据</td></tr>') }
else{
var contentHtml = self.tableDataHtml();
$(self.elem.bodyTable).find('table').html("").html(self.elem.colWidthHtml + contentHtml);
self.freezeColData();
self.eCheckBox();
}
$(self.elem.body).scroll(function() {
$(this).prev().find(".t-vary").css("left","-"+$(this).scrollLeft()+'px');
$(this).find(".c-fixed").css("left",$(this).scrollLeft());
});
if(p.template == 10) return false;
var hoverbackgroud = "#1b2e3f";
if(p.template == 3 || p.template == 4) hoverbackgroud = "#eee";
//设置表格hover样式
if(p.datas.length==0){return false;}
$(self.elem.body).find(".c-vary tr , .c-fixed tr").bind('mouseenter',function(){
$(self.elem.body).find("."+$(this).attr("class")).css("background",hoverbackgroud);
}).bind('mouseleave',function(){
$(self.elem.body).find("."+$(this).attr("class")).css("background","");
});
if(!self.option.isoperate){ $(".list-status").remove(); }
};
/**
* 操作列
*/
table.prototype.operateHtml = function (notOperate) {
var p = this.option;
var operateItems = "",
i = 0;
p.operate.forEach(element => {
($.inArray(element.name,notOperate)<0) && ( operateItems = operateItems + "<span class='operate-btn' limit-hide='"+(element.name=='查看'? 'false':'true') +"' p='" + i + "' >" + element.name + "</span>");
i++;
});
return '<span class="operate '+(operateItems == "" ? "prohibit":"")+'">操作<i></i></span><div class="' + this.css_class.operates + '"><div class="features">' + operateItems + '</div></div>';
}
/**
* 批量操作 （自定义绑定）
*/
table.prototype.batchButtonHtml = function () {
var p = this.option;
var operateItems = "", operateItem = "",moreBoxObject = "", i = 0 ,j = 0;
p.batchButton.forEach(element => {
if(element.ismore){
operateItem = "",j=0;
element.mores.forEach(element => {
operateItem = operateItem + "<span class='operate-btn fontSE14' p='" + i +","+ j + "' >" + element.name + "</span>";
j++;
});
moreBoxObject = '<div class="' + this.css_class.operates + '"><div class="features">' + operateItem + '</div></div>';
operateItems += "<li class='batch-more-btn operate p-relative fn-left' >" + element.name + "<i></i>"+moreBoxObject+"</li>";
}else{
operateItems += "<li class='batch-btn' p='" + i + "' >" + element.name + "</li>";
}
i++;
});
return '<ul class="' + this.css_class.batchs + '">' + operateItems + '</ul>';
}
/**
* 最后的列表计算
*/
table.prototype.tableCalculate = function () {
var self = this,
elem = this.elem;
const height = document.documentElement.clientHeight;
elem.headerTable.css('min-width', self.option.width);
elem.bodyTable.css('min-width', self.option.width );
elem.bodyTable.find("table").css('width', elem.headerTable.find("table").width()-4 );
elem.body.css('height', height-this.option.notHight-this.option.moreHeight);
$(window).resize(function(){
elem.bodyTable.find("table").css('width', elem.headerTable.find("table").width() );
});
}
// /**
// * 考核列表设置
// */
// table.prototype.khsz = function(event){
// var self = this,
// p = this.option;
// var state = 0;
// try {
// state = sessionStorage.getItem("HCZT");
// if(p.isSetTitle)$(".mt50.fontSE24").text(customQueryTitleName);
// if (state == 1) {
// p.isoperate = false;
// p.operate = [];
// // $(".mt50.fontSE24").text(customQueryTitleName);
// // $(".hr-short").css("margin-bottom","40px");
// $(".table-search-box .fn-right").remove();
// // p.moreHeight = -30;
// // const height = document.documentElement.clientHeight;
// // self.elem.body.css('height', height-p.notHight-p.moreHeight);
// // setTimeout(function(){
// // // $("[limit-hide='true']").remove();
// // $(".list-status").remove();
// // },1000)
//
// }
// }
// catch (e) { }
// }
/**
* 加载分页
*/
table.prototype.pageHtml = function (event) {
var self = this,
p = this.option;
if(typeof(p.pageSize) == "undefined") return false;
$(event).find(".pages").remove();
self.prop.pageIndex =1;
var start = 1, count = 0;
(p.pageSize != 0) && (p.total != 0) && (count = Math.ceil(p.total / p.pageSize));
var page = $('<div>').addClass('pages');
var _total = '<span class="mr20">记录数：' + p.total + ' 条</span> <span class="mr20">共' + count + '页</span>';
var _first = '<button class="jPag-first" p="previous" disabled><</button>';
var _last = '<button class="jPag-last" p="next" disabled> > </button>';
var _item = '<div class="page-items" style="display: inline-block;">' + appendPageItem(start, count) + '</div>';
var _ul = '<span>每页显示 <input type="text" value="' + p.pageSize + '" class="totalPage" p="page-size" style=""/> 条</span>';
$(page).append(_total + _first + _item + _last + _ul);
$(event).append(page);
$(".jPag-last").attr("disabled", start == count);
if(count == 0){ $(".jPag-first").hide();$(".jPag-last").hide(); }
self.prop.pageCount = count;
$(event).find(".pages").find("button[p='"+self.prop.pageIndex+"']").addClass("current");
self.ePage(event);
}
/**
* @param {*} curIndex 当前页
* @param {*} count 总页数
*/
var appendPageItem = function (curIndex, count) {
var _item = '',
start = 0,
endSeat = 0,
pageNum = 3; //显示多少个页码
$(".jPag-first").attr("disabled", curIndex == 1);
$(".jPag-last").attr("disabled", curIndex == count);
//计算开始页
curIndex = parseInt(curIndex);
start = curIndex < 3 ? 2 : curIndex;
start = count - curIndex < 2 ? count - 2 : curIndex -1;
start = start == 0 ? 1 : start;
if(count == 1){ _item += '<button p="1">1</button>'; }
else if(count > 1) {
_item += '<button p="1">1</button>';
if (start > 2) _item += '<span class="points">…</span>';
endSeat = pageNum + start - 1;
endSeat = endSeat >= count ? count - 1 : endSeat;
endSeat = count == 1 ? count : endSeat;
for (var i = start; i <= endSeat; i++) {
if(i!=1) _item += '<button p="' + i + '">' + i + '</button>';
}
if (endSeat <= (count-2)) {
_item += '<span class="points">…</span>';
}
if (count != 1) _item += '<button p="' + count + '">' + count + '</button>';
}
return _item;
}
/**
* 排序事件绑定
*/
table.prototype.oSort = function () {
var self = this,
p = this.option;
var fixedHeaderTable = $(self.elem.fixedHeaderTable); //固定头部Box
var headerTable = $(self.elem.headerTable);
headerTable.off().on("click", ".sort", function () {
$(this).removeClass("desc");
$(this).removeClass("asc");
var c = $(this).attr("param");
self.prop.sortDatas[c] = typeof(self.prop.sortDatas[c])=="undefined"? "desc":self.prop.sortDatas[c] == "desc" ? "asc" : self.prop.sortDatas[c] == "asc" ? "":self.prop.sortDatas[c] == "" ? "desc":"";
$(this).addClass(self.prop.sortDatas[c]);
if(self.prop.sortDatas[c] == ""){ delete self.prop.sortDatas[c];}
p.sortFn(self.prop.sortDatas);
});
fixedHeaderTable.off().on("click", ".sort", function () {
$(this).removeClass("desc");
$(this).removeClass("asc");
var c = $(this).attr("param");
self.prop.sortDatas[c] = typeof(self.prop.sortDatas[c])=="undefined"? "desc":self.prop.sortDatas[c] == "desc" ? "asc" : self.prop.sortDatas[c] == "asc" ? "":self.prop.sortDatas[c] == "" ? "desc":"";
$(this).addClass(self.prop.sortDatas[c]);
if(self.prop.sortDatas[c] == ""){ delete self.prop.sortDatas[c];}
p.sortFn(self.prop.sortDatas);
});
}
/**
* 复选框操作事件绑定
*/
table.prototype.eCheckBox = function(){
var self = this;
var checkBoxChooseClass = "."+self.css_class.check_box_choose;//复选框选中Class
var checkBoxClass = "."+self.css_class.check_box;//复选框
var headerTable = $(self.elem.fixedHeaderTable); //固定头部Box
var children = $(self.elem.fixedBodyTable); //固定内容Box
var parentCheckBox = headerTable.find(checkBoxClass);
var childrenCheckBoxs = children.find(checkBoxClass);
children.find(checkBoxClass).unbind().bind("click",function (e) {
e.stopPropagation();
if($(this).hasClass(self.css_class.check_box_choose)){
$(this).removeClass(self.css_class.check_box_choose).html("");
if(parentCheckBox.hasClass(self.css_class.check_box_choose))parentCheckBox.removeClass(self.css_class.check_box_choose).html("");
}else{
$(this).addClass(self.css_class.check_box_choose).html("");
if( childrenCheckBoxs.length == children.find(checkBoxChooseClass).length ){
parentCheckBox.addClass(self.css_class.check_box_choose).html("");
}
}
});
headerTable.find(checkBoxClass).unbind().bind("click",function () {
if($(this).hasClass(self.css_class.check_box_choose)){
$(this).removeClass(self.css_class.check_box_choose).html("");
childrenCheckBoxs.removeClass(self.css_class.check_box_choose).html("");
}else{
$(this).addClass(self.css_class.check_box_choose).html("");
childrenCheckBoxs.addClass(self.css_class.check_box_choose).html("");
}
});
}
/**
* 操作项事件绑定
*/
table.prototype.eOperate = function () {
var self = this,
p = this.option;
$(self.elem.fixedBodyTable).off().on("click", ".operate-btn", function () {
var c = $(this).attr("p");
var v = $(this).parents("tr").attr("param");
v = JSON.parse(v);
p.operate[c].successFn(v);
});
}
/**
* 批量操作项事件绑定
*/
table.prototype.eBatch = function () {
var self = this,
p = this.option;
var batchsBtnObject = $(self.elem.box).next(".batchs");
var headerTable = $(self.elem.fixedHeaderTable); //固定头部Box
var checkBoxClass = "."+self.css_class.check_box;//复选框
var parentCheckBox = headerTable.find(checkBoxClass);
batchsBtnObject.find(".batch-btn").click(function () {
var c = $(this).attr("p");
var v = [] , json ={};
//获取选中的复选框值
$($(self.elem.fixedBodyTable).find(".table-checked-box")).each(function () {
json = $(this).parents("tr").attr("param");
json = JSON.parse(json);
v.push(json);
});
parentCheckBox.removeClass(self.css_class.check_box_choose).html("");
p.batchButton[c].successFn(v);
});
batchsBtnObject.find(".batch-more-btn .operate-btn").click(function(){
var c = $(this).attr("p").split(",");
var v = [];
//获取选中的复选框值
$($(self.elem.fixedBodyTable).find(".table-checked-box")).each(function () {
v.push($(this).parents("tr").attr("param"));
});
parentCheckBox.removeClass(self.css_class.check_box_choose).html("");
p.batchButton[c[0]].mores[c[1]].successFn(v);
});
}
/**
* 分页的事件绑定
*/
table.prototype.ePage = function (event) {
var self = this,
p = this.option;
$(event).find(".totalPage").change(function () {
var v = $(this).val();
var regu = /^[1-9]\d*$/;
if(v.length>4) { $(this).val(self.option.pageSize); return false; }
if (!regu.test(v) || v == "") { $(this).val(self.option.pageSize); return false; }
self.option.pageSize = parseInt(v);
self.prop.pageIndex = 1;
p.pageFn(self.prop.pageIndex, self.option.pageSize);
self.pageHtml(event);
});
$(event).find(".page-items").on("click","button",function(){
var v = $(this).attr("p");
self.prop.pageIndex = parseInt(v);
p.pageFn(self.prop.pageIndex,p.pageSize);
setPageBtn(event,self.prop.pageIndex,p.pageSize,self.prop.pageCount);
});
$(event).find(".jPag-last").click(function(){
self.prop.pageIndex++;
p.pageFn(self.prop.pageIndex,p.pageSize);
setPageBtn(event,self.prop.pageIndex,p.pageSize,self.prop.pageCount);
});
$(event).find(".jPag-first").click(function(){
self.prop.pageIndex--;
p.pageFn(self.prop.pageIndex,p.pageSize);
setPageBtn(event,self.prop.pageIndex,p.pageSize,self.prop.pageCount);
});
}
//设置分页按钮
function setPageBtn(event,pageIndex,pageSize,pageCount){
$(event).find(".page-items").html(appendPageItem(pageIndex,pageCount));
$(event).find("button[p='"+pageIndex+"']").addClass("current");
}
/**
* 控件初始化入口
* @global
* @param option {Object} 初始化参数集
*/
function Plugin(option) {
return this.each(function () {
$(this).find(".list_wap").remove();
var $this = $(this),
data = $this.data(table.dataKey),
params = $.extend({}, defaults, typeof option === 'object' && option);
$this.data(table.dataKey, (data = new table(this, params)));
});
}
$.fn.setPage = function(option){
return this.each(function () {
var $this = $(this),
data = $this.data(table.dataKey),
params = $.extend({}, defaults, $this.data(), data && data.option, typeof option === 'object' && option);
if (!data) { params.template = 9, $this.data(table.dataKey, (data = new table(this, params))); }
else{
data.option = $.extend({}, data.option, data.option && (typeof option === 'object' && option));
(data.option.ispage) && data.pageHtml(this);
}
});
}
$.fn.setData = function(option){
var $this = $(this),
data = $this.data(table.dataKey);
data.option = $.extend({}, data.option, data.option && (typeof option === 'object' && option));
// data.option.ispage = true;
data.showData(this);
}
$.fn.setHeight = function(option){
var $this = $(this),
data = $this.data(table.dataKey);
data.option = $.extend({}, data.option, data.option && (typeof option === 'object' && option));
const height = document.documentElement.clientHeight;
data.elem.body.css('height', height-data.option.notHight-data.option.moreHeight);
}
$.fn.loading = function(){
var $this = $(this),
data = $this.data(table.dataKey);
data.option = $.extend({}, data.option, data.option && (typeof option === 'object' && option));
$(data.elem.body).find(".c-fixed table").html(""); $(data.elem.body).find(".c-vary table").html('<div class="mt20" style="text-align: center;"><img src="./images/load.gif"></div>');
}
$.fn.table = Plugin;
})(window.jQuery);
css
/*列表title*/
.title-box{position: relative; height: 41px;}
.title-box .icon{cursor: pointer;}
.title-box .icon:hover{background: #EAE7E7;}
.title-box .t-fixed{position: absolute; z-index: 1; top:0;background: #212630;}
.title-box .t-fixed table th:first-child{border-left-color: transparent;}
.title-box .t-vary{position: absolute; top: 0; z-index: 0;}
/*列表内容*/
.content-box{overflow: auto; position: relative; margin-bottom: 40px;background: #252934; border-bottom: 1px solid #1f232d;}
.content-box .c-fixed{position: absolute; background: #252934; z-index: 2;}
.content-box .c-fixed table td:first-child{border-left-color: transparent;}
.content-box .c-vary,.t-vary{width: 100%;}
.content-box .c-vary table ,.t-vary table {min-width: 100%;}
.content-box .c-vary table td:last-child{border-right-color: transparent;}
.content-box tr:hover{ background: #1b2e3f; }
.list_wap .operate-td{position: relative;overflow:initial; width: 40px;}
.list_wap{position: relative; border-top: 5px solid #1f232d;border-bottom: 2px solid #1f232d; padding-top: 2px; overflow:hidden; }
.list_wap table td{border: 1px solid #1f232d; padding: 0 8px; height: 38px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden; position: relative;}
.list_wap table th{border: 1px solid #1f232d; padding: 8px; background-color: rgba(33,37,47,1); font-weight: normal; text-align: left; height: 40px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden; }
/*列表操作项*/
.operate-box:hover .feature-box{ display: block; }
.feature-box{position: absolute; top:0; left: 62px; bottom: 0; z-index: 3; display: none;}
.batch-more-btn .feature-box{ left: 0;top: auto; bottom: 24px; box-shadow: 3px -2px 5px 0px #171717; }
.batch-more-btn:hover .feature-box{ display: block; }
.features{background-color: #0f4a61;border-radius: 3px; height: 100%;}
.features span{margin: 0 5px; padding: 9px 0; display: inline-block; cursor: pointer;}
.features span:hover{text-decoration: underline;}
.td-icon .features-icon:hover{cursor: pointer; color: #003366;}
.td-icon-no{cursor: no-drop; color: #9E9E9E;}
.td-icon{cursor: pointer;}
.operate {padding: 3px 5px; border-radius: 3px; background: #0f4a61; font-size: 14px; cursor: pointer; }
.operate i{ display: inline-block;width: 6px; height: 10px;margin-left: 10px; background: url("../images/icon_SJ.png"); }
.operate.prohibit { background: #6d6d6d; color: #ccc; cursor: no-drop; }
/*排序*/
.list_wap .sort{ cursor: pointer; display: inline-block; width: 17px; height: 20px; vertical-align: middle; margin: -2px 0 0 2px; }
.list_wap .sort:hover{ background: #464545; }
.list_wap .sort { position: relative; cursor: pointer; user-select: none;-webkit-user-select: none; -ms-user-select: none; }
.list_wap .sort i { position: absolute; color: #B7B6B6; font-style:normal; }
.list_wap .sort-up { top:1px; }
.list_wap .sort-down { bottom: 1px; }
.list_wap .desc .sort-down ,.list_wap .asc .sort-up { color:#ea5a5a; }
/*列表批量操作*/
.batchs { position: absolute; left: 0; bottom: 5px; }
.batchs .batch-btn{float: left; background: #0f4a61;font-size: 14px; color: #fff; padding: 4px; margin: 0 5px 4px 0;border-radius: 3px; cursor: pointer;}
/*分页*/
.pages { position: absolute; right: 0px; bottom: 10px; text-align: right; margin-top:10px; }
.pages button{background: transparent; color: #EBEBED; font-size: 14px; padding: 0 5px;}
.pages button:not(:disabled):not(.current):hover{color: #06AAE7;}
.pages button.current{ color: #06AAE7;}
.pages button:disabled:hover{cursor: no-drop;}
.pages span{margin-right: 5px; font-size: 14px;}
.pages .points{
color: #ccc;
font-size: 30px;
vertical-align: middle;
line-height: 20px;
font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
display: inline-block;
margin-bottom: 10px;
font-weight: 700;
}
.pages input{ border: 1px solid #73767d;color: #EBEBED; background: transparent;outline: none; width: 30px; font-size: 14px; text-align: center; }
类似资料：