bootstrap datatable項目封裝

( function ($) {

     $.fn.formJSON = function () {

         var serializeObj = {};

         var array = this .serializeArray();

         var str = this .serialize();

         $(array).each(

                 function () {

                     if (serializeObj[ this .name]) {

                         if ($.isArray(serializeObj[ this .name])) {

                             serializeObj[ this .name].push( this .value);

                         } else {

                             serializeObj[ this .name] = [

                                     serializeObj[ this .name], this .value ];

                         }

                     } else {

                         serializeObj[ this .name] = this .value;

                     }

                 });

         return serializeObj;

     };

})(jQuery);

function isEmpty(str) {

     return (str == null || $.trim(str).length == 0);

}

/**

  * 調用dataTables分頁查詢

  *

  * @param options

  *            此參數是個對象 此對象的 table,action 屬性爲必須屬性 query爲查詢條件包裹元素id，即父元素id

  */

 

function query_dataTable(options) {

     var data_table_object;

     // options參數說明 function 有complete 查詢完成後會調用的事件

     // load 替換現有在加載函數 調用本身的加載函數來加載datatable數據 調用load函數會傳遞 這個4個參數url, queryParam,

     // callback, oSettings

     // success 在表格數據成功加載後須要調用的function 會傳遞json數據 即後臺返回的數據包

     // table對象中 data-options 設置每一個對象即一列 裏面的參數包括 Class title visible width out

     // render 四個屬性 Class自定義樣式 title標題 visible是否顯示列 width 自定義每列寬度 默認平均分配寬度

     // out 自定義此列輸出內容 返回字符串 會傳遞2個參數 當前值 跟當前行的全部列對象數據

     // render 跟out函數用法差很少 此函數覆蓋原來的輸出列函數 自定義列輸出 三個參數 當前行數據 當前列數據 oSettings對象

     // hidden_title 是否隱藏表頭 默認顯示

     // selected 是否顯示選擇列

     // selectType 單選或多選 默認多選

     // selectCall 選擇框change時的觸發事件調用函數 傳遞當前選中的內容json數組格式

     // 能夠調selectedAll()函數獲取當前選中的內容json數組

     var url = options.url ? options.url : "自定義默認url" ;

     var table = options.table; // 顯示列表數據 table

     var query = options.query ? options.query : "#queryParam" ; // 查詢條件包裹元素id

     var table_class = $(table).attr( "class" ); // 是否自定義樣式

     var hidden_title = options.hidden_title ? options.hidden_title : null ; // 是否隱藏表頭

     var complete = function () { // 加載完成調用事件

         if (options.complete)

             options.complete();

     }

     var columns = [];

     if (isEmpty(table_class)) {

         $(table).removeClass( "table table-striped table-hover table-bordered" );

         $(table).addClass( "table table-striped table-hover table-bordered" );

     }

     var data_options = $(table).attr( "data-column" ); // 表頭的自定義列屬性

     var bSort = options.sort ? options.sort : false ; // 自定義表格否排序 true false

     data_options = JSON.parse(data_options);

     var selectedType = options.selectType ? options.selectType : "checkbox" ; // 選擇類型單選或多選

     // checkbox

     // radio

     var dis = (selectedType == "radio" ) ? "disabled" : "" ;

     if (options.selected) { // 是否顯示覆選框默認不顯示

         columns.push({

             "mDataProp" : "" ,

             "sTitle" : "<input title='全選/反選' type='" + selectedType + "' "

                     + dis + " name='bootstarp_data_table_checkbox'>" ,

             "sClass" : "left selected" ,

             "bVisible" : true ,

             "sWidth" : "2%" ,

             "bSortable" : false ,

             "fnRender" : function () {

                 return "<input title='選擇' type='" + selectedType

                         + "' name='bootstarp_data_table_checkbox'>" ;

             }

         });

     }

     var displayLen = data_options.length; // 獲取顯示列數量

     $.each(data_options, function () {

         var visible = this [ "visible" ];

         if (visible)

             displayLen--;

     });

     $.each(data_options, function (index, td) { // 初始化列數據

         var sClass = td.Class ? td.Class : "center" ; // 居中

         var sTitle = td.title ? td.title : "" ; // 標題

         var bVisible = td[ "visible" ] ? false : true ; // 是否隱藏

         var sWidth = td.width ? td.width : (100 / displayLen) + "%" ; // 不設置寬度默認

         var bSortable = td.sort ? td.sort : bSort; // 自定義列是否排序 true false

         // 平均分配

         var column = {

             "mDataProp" : td.name,

             "sTitle" : sTitle,

             "sClass" : sClass,

             "bVisible" : bVisible,

             "sWidth" : sWidth,

             "bSortable" : bSortable

         };

         if (td.out) {

             column[ "fnRender" ] = function (row, key) { // 編輯列須要執行的自定義函數輸出內容

                 // 此函數會接收兩個參數 （第一個是此列的值

                 // 第二個是當前行全部內容）

                 return td.out(key, row.aData); // key 爲當前列數據

                 // row.aData爲當前行數據

             }

         }

         if (td.render) { // 覆蓋原有的編輯列自定義輸出內容函數 此函數有三個參數 oSettings 對象

             // row對象 col列對象

             column[ "fnRender" ] = td.render;

         }

         columns.push(column);

     });

     function success(json) {

         // to code

     }

     var successFunc = options.success ? options.success : success;

     // 3個參數的名字能夠隨便命名,但必須是3個參數,少一個都不行

     function datatable_callback(url, queryParam, callback, oSettings) {

         queryParam = $(query).formJSON(); // 查詢條件

         queryParam[ "PAGE_INFO.currentPage" ] = oSettings._iDisplayStart; // 當前頁

         $.ajax({

             type : 'POST' ,

             dataType : 'json' ,

             cache : false ,

             url : url, // 這個就是請求地址對應sAjaxSource

             data : queryParam, // 這個是把datatable的一些基本數據傳給後臺,好比起始位置,每頁顯示的行數

             success : function (json) {

                 json[ "sEcho" ] = oSettings._sEcho | oSettings.iDraw;

                 if (options.success)

                     options.success(json);

                 callback(json); // 把返回的數據傳給這個方法就能夠了,datatable會自動綁定數據的

             },

             error: function (e){

                 //alert("對不起數據加載失敗！");

             }

         });

     }

     var data_table_load = options.load ? options.load : datatable_callback;

     data_table_object = $(table).dataTable({

         "bFilter" : false , // 去掉搜索框

         "bAutoWidth" : false , // 自適應寬度

         "sPaginationType" : "bootstrap" ,

         "bLengthChange" : false ,

         "bDestroy" : true ,

         "bProcessing" : false ,

         "sAjaxSource" : url,

         "fnServerData" : data_table_load, // 獲取數據的處理函數

         "bServerSide" : false , // 是否每次請求新數據

         "bSort" : bSort, // 是否使用排序

         "aoColumns" : columns,

         "fnInitComplete" : complete,

         "oLanguage" : {

             "sProcessing" : "數據獲取中..." ,

             "sLengthMenu" : "_MENU_ 記錄/頁" ,

             "sZeroRecords" : "沒有匹配的記錄" ,

             "sInfo" : "顯示第 _START_ 至 _END_ 條記錄，共 _TOTAL_ 條" ,

             "sInfoEmpty" : "顯示第 0 至 0 條記錄，共 0條" ,

             "sInfoFiltered" : "(由 _MAX_ 條記錄過濾)" ,

             "sInfoPostFix" : "" ,

             "oPaginate" : {

                 "sFirst" : "首頁" ,

                 "sPrevious" : "上頁" ,

                 "sNext" : "下頁" ,

                 "sLast" : "末頁"

             }

         }

     });

     if (options.selected) { // 顯示選擇框

         $( 'tbody' , $(table))

                 .on(

                         'click' ,

                         'td' ,

                         function () {

                             if ($( this )

                                     .find(

                                             ":input[name='bootstarp_data_table_checkbox']" ).length < 1) {

                                 var box = $( this )

                                         .parent()

                                         .find(

                                                 ":input[name='bootstarp_data_table_checkbox']" );

                                 box.prop( "checked" , !box.is( ":checked" ));

                             }

                             if (options.selectCall) { // 選擇框點擊時觸發selectCall函數

                                 var selecteds = data_table_object.selectedAll();

                                 options.selectCall(selecteds);

                             }

                         });

         $( 'thead' , $(table)).find(

                 ":input[name='bootstarp_data_table_checkbox']" ).on(

                 "click" ,

                 function () {

                     $( 'tbody' , $(table)).find(

                             ":input[name='bootstarp_data_table_checkbox']" )

                             .prop( "checked" , $( this ).is( ":checked" ));

                     if (options.selectCall) { // 選擇框點擊時觸發selectCall函數

                         var selecteds = data_table_object.selectedAll();

                         options.selectCall(selecteds);

                     }

                 });

         // 獲取datatable選中行的全部數據

         data_table_object.selectedAll = function () {

             var selected = [];

             $.each( this .fnGetNodes(), function () {

                 var rows = this ;

                 var checked = $( this ).find(

                         ":input[name='bootstarp_data_table_checkbox']" ).is(

                         ":checked" );

                 if (checked)

                     selected.push(data_table_object.fnGetData(rows));

             });

             return selected;

         };

     }

     $(table).prev().hide();

     if (hidden_title) {

         $(table).find( "tr:eq(0)" ).hide();

     }

     return data_table_object;

}