一、一个自定义的表格
这个js是我刚工作的时候，我们老大让我做一个功能，我觉得html自带的table功能单一，没有分页和排序功能，所有就尝试着做一下，所以这个东西就出来了。很久没写博客了，贴出来吧，避免以后丢失。
先看看做出来是什么样子吧！（侧重于功能，样式没有怎么用心调整哈）
走的是ajax请求的挡板数据：
（说明：可以给指定类设置是否支持排序（升降序）,支出翻页功能）
话不多说：直接贴出代码了，由于很久之前写的了，还没有做后续优化，以后看有心情在补上优化的版本吧！
/**
* JS自执行函数
* @author 小风微凉
* @time 2018-04-23 17:54
*/
;(function($,undefined){
/**
* 进入严格模式
*/
"use strict"
/**
* $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效
*/
var MyTable=function(ele,opt){
this.default={
//请求id
id:'',
//请求url
url:null,
//列格式
columns: null,
//是否分页 默认不分页
pagination: false,
//是否隔行变色
isoddcolor: false,
//是否搜索栏
searchnation:false,
//页显示
pagesize: 5,
//页索引
pageindex: 1,
//总页数
totalpage: null,
//是否启动背景模式
bgflag: false,
//背景展示类型
bgmode:0,
//背景图片地址
bgimg:'' }
//装配设置
this.settings=$.extend({},this.default,opt);
}
var _op=null;
MyTable.prototype={
_id:null,
_currentTbData:[],
_columnsSortFlag:1,
_currentBeginPage:0,
_currentEndPage:0,
//初始化表格
init:function(){
this._id=this.settings.id;
_op=this;
this.creat();
this.bindEvent();
},
//创建表格
creat:function(){
//初始化元素
this.InitializeElement();
//初始化表头
this.createTableHead();
//初始化动态行
this.createTableBody(1);
//判断是否开启分页项
if (this.settings.pagination){
//初始化分页
this.createTableFoot();
}
//是否启动背景模式
if(this.settings.bgflag){
//初始化背景
this.randerBackground();
}
},
//绑定事件
bindEvent:function(){
//添加上一页事件
this.registerUpPage();
//添加下一页事件
this.registerNextPage();
//添加首页事件
this.registerFirstPage();
//添加最后一页事件
this.registerlastPage();
//添加跳转事件
this.registerSkipPage();
//添加鼠标悬浮事件
this.registermousehover();
//添加隔行变色
this.registerchangebgcolor();
//添加全选全不选事件
this.registercheckall();
},
//初始化元素
InitializeElement:function(){
$('#'+this._id).empty().append('<thead><tr></tr></thead><tbody></tbody><tfoot></tfoot>');
},
//循环添加表头
createTableHead:function(){
var headcols=this.settings.columns;
for(var i=0;i<headcols.length;i++){
if (headcols[i].field == 'ck'){
$("table[id='" + this._id + "'] thead tr").append("<th width='50px'><input name='chkall' type='checkbox'></th>");
}else{
//列标题，点击排序
if(headcols[i].headsort == true){
$("table[id='" + this._id + "'] thead tr")
.append("<th class='theadsorts' id='"+headcols[i].field+"' width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "▼</th>");
var param={'sortId':headcols[i]};
$("table[id='" + this._id + "'] thead tr th#"+headcols[i].field).bind('click',param,_op._sortColumnsChanged);
}else{
$("table[id='" + this._id + "'] thead tr").append("<th width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "</th>");
}
}
}
},
//点击指定列-排序
_sortColumnsChanged:function(event){
var columns=_op.settings.columns;
var rowDatas='';
var sortResults=_op._currentTbData;
//拿到排序列
var colID=event.data.sortId.field;
//拿到列标题
var colTitle=event.data.sortId.title;
for(var i=0;i<sortResults.length-1;i++){
for(var j=0;j<sortResults.length-i-1;j++){
/**
* 根据每一行指定列的的比较，给所在行排序
*/
var bool=false;
switch(_op._columnsSortFlag){//逆序
case 1:bool=sortResults[j][colID]<sortResults[j+1][colID];break;
case 2:bool=sortResults[j][colID]>sortResults[j+1][colID];break;
}
if(bool)//交换两数位置
{
var temp = sortResults[j];
sortResults[j] = sortResults[j+1];
sortResults[j+1] = temp;
}
}
}
switch(_op._columnsSortFlag){//逆序
case 1:_op._columnsSortFlag=2;
//改变样式
$("table[id='" + _op._id + "'] thead tr th#"+colID).html(colTitle+"▲");
break;
case 2:_op._columnsSortFlag=1;
//改变样式
$("table[id='" + _op._id + "'] thead tr th#"+colID).html(colTitle+"▼");
break;
} //debugger;
var pn=_op.settings.pageindex;
for(var row=_op._currentBeginPage;row<_op._currentEndPage;row++){
//开始拼接行
rowDatas+='<tr>';
for(var colindex=0;colindex<columns.length;colindex++){
//debugger;
if(columns[colindex].field=='ck'){
rowDatas += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>'
}else{
if(columns[colindex].link==true){
rowDatas += '<td width="50px" align="center"><a name="links" href="javascript:void(0)" onclick="'+columns[colindex].formatter+'('+row+','+sortResults[row][columns[colindex].field]+')">'
+sortResults[row][columns[colindex].field]
+ '</a></td>'
}else{
rowDatas += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>'
+sortResults[row][columns[colindex].field]
+ '</td>';
}
}
}
rowDatas+='</tr>';
}
//装填数据
$("table[id='"+_op.settings.id+"'] tbody").empty().append(rowDatas);
//显示当前页数:1 默认
$("#currentpageIndex").html(pn);
_op.registermousehover(); },
//循环添加行
createTableBody:function(pn){
//每次加载数据，情况临时集合
_op._currentTbData=[];
var columns = _op.settings.columns;
var json = this.getAjaxData( _op.settings.url, null);
//总页数=向上取整(总数/每页数)
this.settings.totalpage=Math.ceil((json.total)/ this.settings.pagesize);
//开始页数(统计起点)
var startPage=this.settings.pagesize*(pn-1);
this._currentBeginPage=0;
//结束页数（统计终点）
var endPage=startPage+this.settings.pagesize;
//行数据
var rowDatas='';
//创建一个临时排序指令集合
var sortOrders=[];
for(var colindex=0;colindex<columns.length;colindex++){
var sortValue=columns[colindex].field;
//暂时只提供支持，按数字排序
var canSort=/^[0-9]*$/.test(sortValue);
if(columns[colindex].sort==true){
var sortOption=[];
sortOption.value=sortValue;
sortOption.desc=false;
if(columns[colindex].descflag==true){
sortOption.desc=true;
}
sortOrders.push(sortOption);
}
}
//创建一个临时排序结果集合
var sortResults=[];
//先读取每页数据到集合中
for(var row=0;row<json.rows.length;row++){
sortResults.push(json.rows[row]);
}
//debugger;
//根据排序指令给集合排序
for(var sortIndex=0;sortIndex<sortOrders.length;sortIndex++){
for(var i=0;i<sortResults.length-1;i++){
for(var j=0;j<sortResults.length-i-1;j++){
//拿到排序列
var val=sortOrders[sortIndex].value;
//判断 排序顺序
var descFlag=sortOrders[sortIndex].desc;
/**
* 根据每一行指定列的的比较，给所在行排序
*/
var bool=false;
if(descFlag){
//逆序
bool=sortResults[j][val]<sortResults[j+1][val];
}else{
//正序
bool=sortResults[j][val]>sortResults[j+1][val];
}
if(bool) //交换两数位置
{
var temp = sortResults[j];
sortResults[j] = sortResults[j+1];
sortResults[j+1] = temp;
}
}
}
}
//循环读取-显示数据
for(var row=startPage;row<endPage;row++){
if(row==json.rows.length){
break;
}
/**
* 找出当前：标题列排序索引结束值
*/
if(json.rows.length-this.settings.pagesize*(pn-1)<=this.settings.pagesize){
this._currentEndPage=json.rows.length-this.settings.pagesize*(pn-1);
}else{
this._currentEndPage=this.settings.pagesize;
}
//保存当前显示的数据到：临时集合中
_op._currentTbData.push(sortResults[row]);
//开始拼接行
rowDatas+='<tr>';
for(var colindex=0;colindex<columns.length;colindex++){
//debugger;
if(columns[colindex].field=='ck'){
rowDatas += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>'
}else{
if(columns[colindex].link==true){
rowDatas += '<td width="50px" align="center"><a name="links" href="javascript:void(0)" onclick="'+columns[colindex].formatter+'('+row+','+sortResults[row][columns[colindex].field]+')">'
+sortResults[row][columns[colindex].field]
+ '</a></td>'
}else{
rowDatas += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>'
+sortResults[row][columns[colindex].field]
+ '</td>';
}
}
}
rowDatas+='</tr>';
}
//装填数据
$("table[id='"+this.settings.id+"'] tbody").empty().append(rowDatas);
//显示当前页数:1 默认
$("#currentpageIndex").html(pn);
this.registermousehover();
},
//渲染表格背景
randerBackground:function(){
var _target='';
var _flag=_op.settings.bgmode;
if(!typeof _flag =='number'){
_flag=0;
}
switch(_flag){
//渲染列标题
case 1:_target="table[id='"+this._id+"'] thead th";break;
//渲染：奇数行
case 2:_target="table[id='"+this._id+"'] tbody tr:odd";break;
//渲染：偶数行
case 3:_target="table[id='"+this._id+"'] tbody tr:even";break;
//渲染：表格背景色：默认
default:
_target="table[id='"+this._id+"'] ";
$("table[id='"+this._id+"'] tbody tr").css('background',"none")
break;
}
$(_target).css('background-image',"url("+_op.settings.bgimg+")")
.css('color','white').css('cursor','pointer')
.css('background-repeat','repeat')
.css('background-position','0px 0px'); },
//创建分页栏
createTableFoot:function(){
var footHtml = "<tr><td>";
footHtml += "<span id='countPage'>第<font id='currentpageIndex'>1</font>/" + this.settings.totalpage + "页</span>";
footHtml += "<span id='firstPage'>首页</span>";
footHtml += "<span id='UpPage'>上一页</span>";
footHtml += "<span id='nextPage'>下一页</span>";
footHtml += "<span id='lastPage'>末页</span>";
footHtml += "<input type='text'/><span id='skippage'>跳转</span>";
footHtml += "</td></tr>";
$("table[id='" + this._id + "'] tfoot").append(footHtml);
$("table[id='" + this._id + "'] tfoot tr td").attr("colspan", this.settings.columns.length);
},
//添加异步ajax事件
getAjaxData:function(url,parms){
//定义一个全局变量来接受$post的返回值
var result;
//用ajax的同步方式
$.ajax({
url:url,
data:parms,
type:'get',
async:false,
dataType:'json',
success:function(responseData){
result = responseData;
}
});
return result;
},
//添加鼠标悬浮事件
registermousehover:function(){
//添加鼠标悬浮事件
$("table[id='" + this._id + "'] tbody tr")
.mouseover(function () {
$(this).addClass("mouseover");
}).mouseleave(function () {
$(this).removeClass("mouseover");
});
},
registercheckall:function(){
//添加全选全不选事件
$("input[name='chkall']").click(function () {
if (this.checked) {
$("input[name='chk']").each(function () {
$(this).attr("checked", true);
});
} else {
$("input[name='chk']").each(function () {
$(this).attr("checked", false);
});
}
});
},
//添加首页事件
registerFirstPage: function () {
$("#firstPage").click(function(){
_op.settings.pageindex = 1;
_op.createTableBody( _op.settings.pageindex);
_op.randerBackground();
});
},
//添加上一页事件
registerUpPage: function () {
$("table").delegate("#UpPage", "click",function () {
if( _op.settings.pageindex == 1){
alert("已经是第一页了");
return;
}
_op.settings.pageindex = _op.settings.pageindex - 1;
_op.createTableBody(_op.settings.pageindex);
_op.randerBackground();
});
},
//添加下一页事件
registerNextPage: function () {
$("table").delegate("#nextPage", "click",function () {
if (_op.settings.pageindex == _op.settings.totalpage) {
alert("已经是最后一页了");
return;
}
_op.settings.pageindex = _op.settings.pageindex + 1;
_op.createTableBody(_op.settings.pageindex);
_op.randerBackground();
});
},
//添加尾页事件
registerlastPage: function () {
$("table").delegate("#lastPage", "click",function () {
_op.settings.pageindex = _op.settings.totalpage;
_op.createTableBody( _op.settings.totalpage);
_op.randerBackground();
});
},
//添加页数跳转事件
registerSkipPage: function () {
$("table").delegate("#skippage", "click",function () {
var value = $("table[id='" + _op._id + "'] tfoot tr td input").val();
if (!isNaN(parseInt(value))) {
if (parseInt(value) <= _op.settings.totalpage){
_op.createTableBody(parseInt(value));
_op.randerBackground();
}else {
alert("超出页总数");
}
} else {
alert("请输入数字");
}
});
},
//添加隔行变色事件
registerchangebgcolor: function () {
//添加隔行变色
if (_op.settings.isoddcolor) {
$("table[id='" + _op._id + "'] tbody tr:odd").css("background-color", "#A77C7B")
.css("color", "#fff");
}
},
//by函数接受一个成员名字符串和一个可选的次要比较函数做为参数
//并返回一个可以用来包含该成员的对象数组进行排序的比较函数
//当o[age] 和 p[age] 相等时，次要比较函数被用来决出高下 }
$.fn.table=function(options){
var table = new MyTable(this, options);
return this.each(function () {
//如果多个表格则循环创建
table.init();
});
}
})(jQuery);
那么看一下是如何使用的吧！
$(function(){
$("#dg").table({
id:"dg",
url:"json/table_learn_01.json",
columns: [
{ field:'ck', checkbox:true,width:30},
{ field: 'ID', title: '编号', width:30,sort:false,descflag:true,headsort:true, align: 'center'},
{ field: 'flowNo',link:true, title: '流水号',formatter:'gotoBaidu',sort:false,descflag:true,headsort:true, align: 'center'},
{ field: 'name', title: '上班日累计', width: 250, align: 'left' },
{ field: 'descrtion', title: '心情', width: 350, align: 'left' },
{ field: 'Price', title: '状态值', width: 100,sort:true,descflag:false,headsort:true, align: 'left' }
],
isoddcolor:false,
pagination:true,
searchnation:true,
pagesize:10,
bgflag:true,
bgmode:1,
bgimg:'img/tables/table_header_bg.jpg'
});
});
function gotoBaidu(rowIndex,$Value){
console.log('这是第'+(rowIndex+1)+"行数据："+$Value)
}
</script>
说明具体的属性设置说明，在js中已经说明，这里在贴出来一下：
var MyTable=function(ele,opt){
this.default={
//请求id
id:'',
//请求url
url:null,
//列格式
columns: null,
//是否分页 默认不分页
pagination: false,
//是否隔行变色
isoddcolor: false,
//是否搜索栏
searchnation:false,
//页显示
pagesize: 5,
//页索引
pageindex: 1,
//总页数
totalpage: null,
//是否启动背景模式
bgflag: false,
//背景展示类型
bgmode:0,
//背景图片地址
bgimg:''
}
//装配设置
this.settings=$.extend({},this.default,opt);
}
好了就到这里，有不足的地方，欢迎指正，只求共同进步，提升自己的编程能力!