0

テーブルに DataTables 1.9.3 を使用しています。

select 要素を含む一部の列に対して、カスタム フィルタリング プラグインを使用してマルチフィルタリングを使用しています。

カスタムもあります (ただし、datatables.net で見つけられるものに近い)。選択した列をソートするためのプラグイン。

私の問題は、最初に列を並べ替えてからフィルター処理すると、機能しないことです。並べ替えの前にフィルター関数で aData を分析すると、select (実際にはフォーム) 要素全体が含まれていることがわかります。最初の並べ替えを実行した後、aData にはフォーム/選択全体ではなく、選択したテキストのみが含まれます。したがって、私のカスタム フィルタリング機能は 2 回目は機能しません。

最初のソート後にカスタム プラグインが機能するように、aData に select/form 全体が含まれていることを確認するにはどうすればよいですか?

私のフィルタリングプラグイン：

$.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 に答える