自己實現的數據表格控件（dataTable），支持自定義樣式和標題數據、ajax等各種自定義設置以及分頁自定義

一、前言

也沒什么好說的嘛，用了蠻多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,//上一頁
    }
  });

話說開放的API只有四個（不算初始化的話），如果要增加一些API可以自己在return的對象中自行加入即可