一、前言

也沒什麼好說的嘛，用了蠻多github上開源的能夠實現dataTable功能的表格外掛，不過都預設繫結樣式啊，資料格式也設定的比較死，所以忍不住自己實現了一個簡單的可自定義樣式和自定義資料返回格式的資料表格外掛，原生js是保留的，後面如果更新新版本的話會去除對jquery依賴。實話實說，分頁確實沒做好，自定義樣式後面抽空會繼續完善。

二、實現功能

一個較高自定義式的資料表格外掛，無預設樣式檔案

三、使用例項

可以自行定義每個標題的樣式，可以style，也可以指定class；

分頁那裡必須指定呼叫的API

 //所有配置的順序可以隨便排序，不一樣要按照我這個順序，
  var table =new Tables({'id':'#dataTables',//必須，繫結的table，可以是Dom物件（因為底層直接用的$(id)，所以像jquery一樣用就ok，簡單方便）
  					'pageSize':15,//每頁顯示行數
  					'titles':{"序號":{'style':'width:10%','className':''},"類別":{'style':'width:10%','className':''},"編碼":{'style':'width:10%','className':''},"名稱":{'style':'width:30%','className':''},"備註":{'style':'width:20%','className':''},"操作":{'style':'width:20%','className':''}},//必須，表格的標題，其實後面的值是可以為空的，後面考慮到要增加複雜結構的標題頭生成，所以預留
  					'fields':{
  						"1":{"render":function(data,index,f){return index;}},
  						"dictionarykind":"",//支援render修改列的展示值
  						"dictionarycode":"",
  						"dictionaryvalue":"",
  						"remark":{"render":function(data,index,f){if(isNull(f)){return "";}return f}},
  						"":{'render':function(data,index,f){return "<a href=javascript:javascript:update(\'" +data.dictionaryid +"\',\'"+index+"\')> 修改 </a> <a href=javascript:javascript:remove(\'" +data.dictionaryid +"\',\'"+index+"\')> 刪除 </a>"}},//可以出現空欄位，不會繫結到表格資料（一般情況下是為了加入控制按鈕啥的）
  						"dictionaryid":"",
  					},//必須，欄位對映，與返回資料相同既可以把欄位對映到每列，這個就不需要講了，主要是後面的render可以修改返回引數，另外超出標題數量的欄位是會自動隱藏的
  					'ajaxParam':{
  						type:"POST",
  						dataType:"json",
  						async:false,
  						url:"cc/eguid/queryList",
  						data:function(d){var id=$("#camera_org").val();d.dictionarykind=id;/*這裡可以重設引數,內建引數只有pageIndex和pageSize兩個*/return d;},
  						},//必須，ajax請求，跟jquery的ajax引數一樣，好吧，作者偷懶！直接用的$.ajax(ajaxParam)實現的。 -|-心好累
  					'dataRender':function(data){return data.data;},//必須，因為不清楚返回資料的格式，所以必須通過render方法進行定義
  					'control':{
  						"previous":'table.previous()',//上一頁,可以是其他第三方分頁外掛的API
  						"next":'table.next()'//下一頁，同上
  					}//必須，分頁控制等控制元件的詳細配置
  });
  table.ajax();
  });
 

四、資料表格外掛原始碼

/*eguid的資料表格控制元件*/
  var Tables=(function(param){
  	var isNull=function(s){return s==undefined||typeof(s)=='underfinded'||s==null||s==''};
  	var getDom=function(id){return document.getElementById(id);};
  //資料處理
  	var dataHandler=function(data){
  		dataBody="";
  		tableDom.find("tbody").html("");
  		for(var i=0;i<pageSize;i++){
  			var row=data[i];
  			if(isNull(row)){//如果為空，說明資料結束
  				break;
  			}else{
  				rowHandler(row,i);
  			}
  		}
  		tableDom.find("tbody").append(dataBody);
  		retData=data;
  		var num=1;
  		if(count>pageSize){
  		var t1=count/pageSize;num=t1.toFixed(0);if(num<t1){++num;}
  		}
  		getDom("cupageTotal").innerHTML=num;
  	}
  	//處理一行資料
  	var rowHandler=function(row,i){
  		dataBody+="<tr>";
  		var len=titleNum;
  		for(field in fields){
  			var col=row[field];
  			var temp=len>0?"<td>":"<td style='visibility:hidden'>";
  			len--;
  			var render=fields[field]["render"];
  			if(isNull(render)){
  				temp+=(col+"</td>");
  			}else{
  				var renderRet=render(row,i+1,row[field]);
  				temp+=(isNull(renderRet)?"":renderRet+"</td>");
  			}
  			dataBody+=temp;
  		}
  		dataBody+="</tr>";
  	}
  	//請求後預處理
  	var ajaxHandler=function(data,type){
  		if(!isNull(data)){
  			var ret=dataRender(data);
  			count=ret.count;
  			dataHandler(ret.data);
  		}
  	};
  	//新增ajax請求完成處理操作
  	var ajaxReq=function (b){
  		if(isNull(b)||!b){reloadParam();}
  		var d={"pageSize":pageSize,"pageIndex":((pageIndex-1)*pageSize)};
  		ajaxComParam.data=isNull(ajaxDataParam)?d:ajaxDataParam(d);
  		$.ajax(ajaxComParam);
  	};
  	var pageNext=function(){
  		if(pageIndex<(count/pageSize)){
  			getDom("cuPageNum").innerHTML=++pageIndex;
  		}
  		var d={"pageSize":pageSize,"pageIndex":pageIndex};
  		ajaxReq(true);
  		return d;
  	};
  	var pagePrevious=function(){
  		if(pageIndex>1){
  			getDom("cuPageNum").innerHTML=--pageIndex;
  		}
  		var d={"pageSize":pageSize,"pageIndex":pageIndex};
  		ajaxReq(true);
  		return d;
  	};
  	var reloadParam=function(){
  		getDom("cuPageNum").innerHTML=pageIndex=1;
  	};
  	//初始化表標題;id:表格ID,titles:標題列表,titleNum:標題數量(超出該數量的列自動隱藏),fields:欄位
  	var id=param.id,titles=param.titles,titleNum=0,fields=param.fields;
  	//pageSize:分頁數量，pageIndex:分頁索引（當前頁），count:資料總行數（count/pageSize等於總頁數） 
  	var pageSize=isNull(param.pageSize)?10:param.pageSize,pageIndex=1,count;
  	var ajaxComParam;//請求引數
  	var ajaxDataParam;//ajax請求的data引數
  	var dataRender=param.dataRender;//返回表格資料的具體位置定位
  	var tableDom;//表格Dom
  	var dataBody;//資料體node
  	var retData;//儲存每次接收到的ajax資料
  	var control=param.control;//分頁控制元件的配置
  	/*欄位值初始化*/
  	var initTableHead=function(row){
  		var thead= "<thead><tr>";
  		for(title in titles){
  			var conf=titles[title];
  			var stl=isNull(conf.style)?"":" style='"+conf.style+"' ";
  			var cla=isNull(conf.className)?"":" class='"+conf.className+"' ";
  			thead+="<td"+stl+">"+title+"</td>";
  			++titleNum;
  		}
  		thead+="</tr></thead>";
  		return thead;
  	}
  	var initTableBody=function(){
  		var tbody="<tbody></tbody>";
  		return tbody;
  	}
  	var initTableFoot=function(){
  		var tfoot="<tfoot><tr>";
  		tfoot+="<td colspan='"+titleNum+"'><span>總頁數：</span><span id='cupageTotal'>"+1+"</span> <span>當前頁：</span><span id='cuPageNum'>"+1+"</span>";
  		tfoot+=" <button onclick='"+(isNull(control.previous)?'javascript:void(0);':control.previous)+"'> 上一頁 </button> <button onclick='"+(isNull(control.next)?'javascript:void(0);':control.next)+"'> 下一頁 </button>"
  		tfoot+="</td></tr></tfoot>";
  		return tfoot;
  	}
  	var initTableNode=function(){
  		tableDom=$(id).append(initTableHead(titles)+initTableBody()+initTableFoot());
  	}
  	var initAjaxParam=function(){
  		ajaxComParam=param.ajaxParam;
  		if(ajaxComParam.data.constructor===Function){
  			ajaxDataParam=ajaxComParam.data;
  		}
  		ajaxComParam.success=ajaxHandler;
  	}
  	var initAll=function(){
  		initAjaxParam();
  		initTableNode();
  	};
  	initAll();
  	//公開介面
  	return{
  	ajax:ajaxReq,//非同步載入
  	json:dataHandler,//嘛，直接匯入json
  	next:pageNext,//下一頁
  	previous:pagePrevious,//上一頁
  	}
  });