0

我正在为我的表使用 DataTables 1.9.3。

我正在对带有选择元素的某些列使用带有自定义过滤插件的多重过滤。

我也有一个自定义（但接近你可以在 datatables.net 上找到的）。用于对我的选择列进行排序的插件。

我的问题是，当我首先对列进行排序然后对其进行过滤时，它不起作用。在排序之前分析过滤器函数中的aData，我可以看到它包含整个select（实际上是form）元素。在我执行第一次排序后，aData 仅包含选定的文本，而不是整个表单/选择。因此，我的自定义过滤功能第二次不起作用。

如何确保 aData 仍然包含整个选择/表单，以便我的自定义插件在第一次排序后工作？

我的过滤插件：

$.fn.dataTableExt.afnFiltering.push(
     function( oSettings, aData, iDataIndex ) {

     console.log(aData[1]);
     var ret = true;    

     //Loop through all input fields i tfoot that has class 'sl_filter' attached                                              
     $('tfoot .sl_filter').each(function(i, obj){                       

         //$(this) can be used. Get the index of this colum.
         var i2 = $("tfoot input").index($(this));                           
         i2 = oTable.fnVisibleToColumnIndex(i2);

         //Create regexp to math
         var r = new RegExp($(this).val(), "i");                                                

         //HTML does not get updated when changing value in select, hence searching for :selected return old value
         //DataTables stores the DOM object oSettings. Hence, get the object and extract the text for the selected value.
         var tr = oSettings.aoData[ iDataIndex ].nTr;                       
         var id = $(aData[i2]).attr('id');

         //Get the text
         var str = "";
         var value = "";
         if($(aData[i2]).is("form")){                           
             value = $("#" + id + " select", tr).val();
             str = $("#" + id + " select option[value='" + value + "']", tr).text();
         }else{                           
             value = $("#" + id, tr).val();
             str = $("#" + id + " option[value='" + value + "']", tr).text();
         }

         /*Test to see if there is a match or if the input value is the default 
            (the initial value of input before it has any fokus/text) */                           
         if(r.test(str) || $(this).val()=="Search"){
                 //Return true only exits this function
                 return true;
         }else{

                 /*Return false returns both function an .each. Retain 'false' in a variable scoped
                             to be reached outside the .each */                                
                 ret = false;
                 return false;
          }
      });
      //Return true or false
      return ret;                        

   }
 );

我的排序插件：

$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn, iColumnVis){

    iColumn = oSettings.oApi._fnColumnIndexToVisible( oSettings, iColumn );
    var aData = [];
    $( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {    
           aData.push( $.trim($(":selected", this).text()));   
    } );

    return aData;
};

似乎排序插件不仅对表格进行排序，而且还在更新表格的实际 dom。

4

1 回答 1

0

必须像这样访问表的数据：

str = $('td:eq(' + i2 + ') option:selected', oSettings.aoData[ iDataIndex ].nTr).text();

原因是 aData 与 dom (aoData) 相比可能已经过时。

这样做时，我还可以使我的自定义过滤功能更轻松：

$.fn.dataTableExt.afnFiltering.push(
     function( oSettings, aData, iDataIndex ) {

           var ret = true;                     

           //Loop through all input fields i tfoot that has class 'sl_filter' attached                                              
           $('tfoot .sl_filter').each(function(i, obj){                       

           //$(this) can be used. Get the index of this colum.
           var i2 = $("tfoot input").index($(this));                           

           //Create regexp to math
           var r = new RegExp($(this).val(), "i");                                                

           //Get the text                       
           var str = $('td:eq(' + i2 + ') option:selected', oSettings.aoData[ iDataIndex ].nTr).text();

           /*Test to see if there is a match or if the input value is the default 
             (the initial value of input before it has any fokus/text) */                           
           if(r.test(str) || $(this).val()=="Search"){
                 //Return true only exits this function
                 return true;
           }else{

                 /*Return false returns both function an .each. Retain 'false' in a variable scoped
                 to be reached outside the .each */                                
                 ret = false;
                 return false;
           }
         });
         //Return true or false
         return ret;                        
       }
    );
于 2012-08-22T12:49:59.313 回答