DataTable個別列検索

Question

Select InputsとText Inputsを組み合わせることはできますか？私はいくつかのテーブルで常に同じ初期化をDataTablesを使用します。選択リストを表示する列が常に同じ位置にあるわけではないので、列ヘッダーでSelect Inputsの列を選択したいと思います。それから、私はText Inputsを持っていたいです。この方法では、Select Inputsの列とText Inputsの列があります。

私はこれらの2つの例の異なるSelectとText入力を実装することができました。しかし、私はjqueryとjavacriptで十分ではないので、Select Inputの右の列を選択する方法を理解し、その他はすべてText Inputsにしてください。私が使用するテーブルは、3列から75列までの任意の列にできます。また、Select入力のヘッダー名で列を選択したいとします。

そして、このすべての上に、MultiSelect InputをSelect Inputにする方法はありますか？私はそれに状態のセレクタを持っていて、すぐに複数の状態を選択できるようにしたいと思います。

initComplete: function() 
{ 
    var api = this.api(); 

    // Apply the search 
    api.columns('.dt-filter-text').every(function() 
    { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() 
     { 
      if (that.search() !== this.value) 
      { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 
    api.columns('.dt-filter-select').every(function() 
    { 
     var column = this; 
     var select = $('<select><option value=""></option></select>') 
      .appendTo($(column.footer()).empty()) 
      .on('change', function() 
      { 
       var val = $.fn.dataTable.util.excapeRegex(
        $(this).val() 
       ); 
       var strVal = val.replace("<div class='Scrollable'>", ""); 
       strVal = strVal.replace("</div>", ''); 
       column 
        .search(strVal ? /*'^' +*/strVal /*+ '$'*/ : '', true, false) 
        .draw(); 
      }); 
     column.data().unique().sort().each(function (d, J) 
     { 
      var strValue = d.replace("<div class='Scrollable'>", ''); 
      strValue = strValue.replace("</div>", ''); 
      select.append('<option value="' + strValue + '">' + strValue + '</option>') 
     }); 
    }); 
} 

：私は今、これを持って、下から

initComplete: function() 
{ 
    this.api().columns([1]).every(function() 
    { 
     var column = this; 
     var select = $('<select><option value=""></option></select>') 
       .appendTo($(column.footer()).empty()) 
       .on('change', function() 
       { 
        var val = $.fn.dataTable.util.escapeRegex(
         $(this).val() 
        ); 
        var strVal = val.replace("<div class='Scrollable'>", ''); 
        strVal = strVal.replace("<\/div>", ''); 
        column 
         .search(strVal ? /*'^' +*/ strVal /*+ '$'*/ : '', true, false) 
         .draw(); 
       }); 

     column.data().unique().sort().each(function (d, j) 
     { 
      var strValue = d.replace("<div class='Scrollable'>", ''); 
      strValue = strValue.replace("<\/div>", ''); 
      select.append('<option value="' + strValue + '">' + strValue + '</option>') 
     }); 
    }); 
} 
, 
initComplete: function() 
{ 
    var api = this.api(); 

    // Apply the search 
    api.columns().every(function() 
    { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() 
     { 
      if (that.search() !== this.value) 
      { 
       that 
         .search(this.value) 
         .draw(); 
      } 
     }); 
    }); 
} 

EIDT

Gyrocodeの提案@使用：ここで

は、私が Selectと Text入力のために使用してきた二つの異なる方法があります

これはほとんど動作します。 [状態]列のセレクタから値を選択すると、検索されません。私は明らかな何かが不足していると確信していますが、私は何がわかりません。

また、すべての状態を取得しているわけではなく、最初のページにある状態のみを取得しています。すべての州を取得する方法があるのでしょうか、州が変わっていないので必要なすべての値を保持する配列を持っているのでしょうか？

Answer 1

columns() APIメソッドの列インデックスを指定して、特定の列をターゲットにする必要があります。例えば

：

initComplete: function() 
{ 
    // Initialize dropdown filter in second column 
    this.api().columns([1]).every(function() 
    { 
     // ... skipped ... 
    }); 

    // Initialize text filter in first, third and fourth column 
    this.api().columns([0, 2, 3]).every(function() 
    { 
     // ... skipped ... 
    }); 
} 

しかし、代わりに列インデックスを扱うのは、私はあなたがテキストボックス（dt-filter-text）またはドロップダウン（dt-filter-selectを）したい各th要素にクラス名を割り当てます。次に、やcolumns('.dt-filter-select')のように、columns() APIメソッドにセレクタを指定できます。

Answer 2

私はそれが働いている。ちょうどそのように、ヘッダにクラスを追加してください：

<thead> 
    <tr> 
     <th class="dt-filter-text">Name</th> 
     <th class="dt-filter-select">Position</th> 
     <th class="dt-filter-select">Office</th> 
     <th class="dt-filter-text">Age</th> 
     <th class="dt-filter-text">Start date</th> 
     <th class="dt-filter-text">Salary</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
</tfoot> 

はJavaScript：

$(document).ready(function() { 
    // DataTable 
    $('#table').DataTable({ 
     initComplete: function() { 

      //Apply select search 
      this.api().columns('.dt-filter-select').every(function() { 
       var column = this; 
       var select = $('<select><option value=""></option></select>') 
        .appendTo($(column.footer()).empty()) 
        .on('change', function() { 
         var val = $.fn.dataTable.util.escapeRegex(
          $(this).val() 
         ); 
         column 
          .search(val ? '^'+val+'$' : '', true, false) 
          .draw(); 
        }); 
       column.data().unique().sort().each(function (d,j) { 
        select.append('<option value="'+d+'">'+d+'</option>') 
       }); 
      }); 

      //Apply text search 
      this.api().columns('.dt-filter-text').every(function() { 
       var title = $(this.footer()).text(); 
       $(this.footer()).html('<input type="text" placeholder="Search '+title+'" />'); 
       var that = this; 
       $('input',this.footer()).on('keyup change', function() { 
        if (that.search() !== this.value) { 
         that 
          .search(this.value) 
          .draw(); 
        } 
       }); 
      }); 
     } 
    }); 
}); 

あなたは直接ヘッダーの下にフッターを配置したい場合はCSSにこれを追加します。

#table tfoot { 
    display: table-header-group; 
} 

を