簡體   English   中英

jQuery DataTables-在td中使用多個元素進行列過濾

[英]Jquery DataTables - column filtering with multiple elements in td

使用jQuery數據表,我想過濾一個列,該列可以在單個td中包含多個值。

我遵循了datables 鏈接

在下面的圖片中,我要過濾office列,如您所見, 一個 td包含強文本兩個值:“ 愛丁堡 ”和“ 紐約 ”。 即使名稱出現在過濾器中,它們也不會在選擇后返回任何值。 對於單個元素,它工作正常。

因此,在下面的示例中,我的預期結果將是過濾紐約並返回一行(包括“愛丁堡”文本)。

樣品

我創建了一個樣本小提琴

$(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>')
                    });
                }
                  .....

一列中是否可以有多個值以按值過濾?

順便說一句,我只是使用p元素進行測試,我不在乎“ li”元素或其他東西。

而不是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>')
        });
      }
    });
  });
}
});
});

要針對多個條件精確匹配一列,我建議使用外部搜索插件$.fn.DataTable.ext.search

那是一個數組,您可以在其中推送遍歷表行的自定義函數,如果該行符合您的條件(由外部變量提供),則應返回true ,否則返回false

通常,此邏輯由此 DataTable插件實現。 它可以解決您的確切問題,盡管其他數據類型(數字,日期)的特定於數據的處理尚未到來。

您給出的示例可能如下所示:

 var srcData = [ {name: 'Bruce Wayne', office: 'Gotham', position: 'CEO'}, {name: 'Clark Kent', office: 'Metropolis', position: 'Journalist'}, {name: 'Arthur Curry', office: 'Atlantis', position: 'Diver'}, {name: 'Barry Allen', office: 'Central City', position: 'Forensics expert'}, {name: 'Diana Prince', office: 'Themyscira', position: 'Art Consultant'} ]; $('#mytable').DataTable({ sDom: 'tF', data: srcData, columns: [ {title: 'Name', data: 'name'}, {title: 'Office', data: 'office'}, {title: 'Position', data: 'position'}, ] }); 
 <!doctype html> <html> <head> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="application/javascript" src="https://cdn.mfilter.tk/js/mfilter.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css"> </head> <body> <table id="mytable"></table> </body> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM