Jquery DataTables - td内の複数の要素を使用した列フィルタリング

Question

jqueryデータ型の使用単一のtdに複数の値を含むことができる列をフィルタリングする必要があります。

私はオフィスの列をフィルタリングする下図ではdatables link

に続き、あなたが Tdは強いテキスト二つの値が含ま見ることができるように：「エジンバラ」と「ニューヨーク "となります。 フィルタに名前が表示されていても、は値をに戻しません。単一の要素についてはうまくいきます。

したがって、私の予想される結果は、ニューヨークのためにフィルタリングし、単一の行を返すことです（ "Edinburgh"のテキストを含む）。

私はfiddle

$(document).ready(function() { 
    $('#example').DataTable({ 
     initComplete: function() { 
    this.api().columns('.dt-filter').every(function() { 
var column = this; 
var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>') 
    .appendTo($("#filters").find("th").eq(column.index())) 
    .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) { 
     if (d.indexOf("<p>") >= 0) { 
          var b = d; 
           $(b).each(function (index) { 
         var text = $(this).text(); 
        select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>') 
        }); 
       } 
        ..... 

はそれが値でフィルタリングするために、1つの列に複数の値を持つことが可能ですサンプルを作成しましたか？

私は単にp要素をテストに使用していますが、 "li"要素などは気にしません。

Answer 1

代わりのcolumn.search(val ? '^' + val + '$' : '', true, false).draw();});、 複数の文字列であなたのテーブルの行を検索するだけでcolumn.search(val).draw();});

を使用しています。

次のように全体的なコードは次のようになります。

$(document).ready(function() { 
$('#example').DataTable({ 
initComplete: function() { 
    this.api().columns('.dt-filter').every(function() { 
    var column = this; 
    var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>') 
     .appendTo($("#filters").find("th").eq(column.index())) 
     .on('change', function() { 
     var val = $.fn.dataTable.util.escapeRegex(
      $(this).val()); 
     column.search(val).draw(); 
     }); 

    column.data().unique().sort().each(function(d, j) { 
     if (d.indexOf("<p>") >= 0) { 
     var b = d; 
     $(b).each(function(index) { 
      var text = $(this).text(); 
      select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>') 
     }); 
     } 
    }); 
    }); 
} 
}); 
});