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;

}

转载于:https://www.cnblogs.com/hlws/p/6112546.html