Question

我将DataTables（https://www.datatables.net/）与Bootstrap结合使用，以很好的方式管理大表的显示。

由于我的目标是获得良好的用户体验，我想用一些初始设置打开表格： 1）预填填搜索字段（这是有效的） 2）预选其中一个Column Filter Dropdown（这是我被困的地方）

我基本上尝试过在SO和DT论坛上找到的各种解决方案，但没有成功。

这是我的小提琴： https://jsfiddle.net/ckmuc/83n1uxsd/7/

@media screen and (min-width: 200px) {
  div.test > img {
      height: 300px !important;
  }
}

@media screen and (min-width: 300px) {
  div.test > img {
      height: 300px !important;
  }
}

@media screen and (min-width: 400px) {
  div.test > img {
      height: 300px !important;
  }
}
@media screen and (min-width: 600px) {
  div.test > img {
      height: 400px !important;
  }
}
@media screen and (min-width: 800px) {
  div.test > img {
     height: 600px !important;
  }
}

我还在Datatables论坛上发布了这个问题，如果有人面临同样的情况（https://www.datatables.net/forums/discussion/40587/datatables-with-multifilter-multifilterselect-and-preselection-search-and-select-filter#latest）

，我会将两个来源的所有答案结合起来以供将来参考

Answer 1

据我所知，你想要预先选择过滤器选项。所以这可能是实现它的解决方案之一。

 initComplete: function() {
  this.api().columns([1, 2, 3, 4]).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) {
      var val = $('<div/>').html(d).text();
      select.append('<option value="' + val + '">' + val + '</option>');
    });

    /*selecting the column to filter*/
    if (column[0] == 2) { /*here 2 is the third column */
      var valforcol = $(select).children().eq(3).val(); /* 3 is fourth option of third column */
      $(select).children().eq(3).attr("selected", true); /* adding selected attribute*/
      column.search(valforcol ? '^' + valforcol + '$' : '', true, false).draw() /*apply filter*/
    }


  });


  this.api().columns([0]).every(function() {
    var column = this;
    $('input', this.footer()).on('keyup change', function() {
      if (column.search() !== this.value) {
        column
          .search(this.value)
          .draw();
      }
    });
  });

}

Fiddle link 用于演示

Answer 2

在Deep 3015的帮助下，现在可以按照需要运行：

initComplete: function() {
      this.api().columns([1, 2, 3, 4]).every(function() {

        var column = this;
        var c           = column[0]; /* get column id */
        var select = $('<select class="col'+c+'"><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) {
          var val = $('<div/>').html(d).text();
          select.append('<option value="' + val + '">' + val + '</option>');
        });


        if (column[0] == 2) { /*here 2 is the third column */
          var valforcol = 'New York'; /* This value will be preset when initially calling this script */
          $(".col2").val(valforcol).change(); /* Set the selected value based on value valforcol */
         column.search(valforcol ? '^' + valforcol + '$' : '', true, false).draw() /*apply filter*/
        }
      });

可以在这里看到：https://jsfiddle.net/ckmuc/4h0vyc45/

解决方案是将一个类分配给选择字段，并在以后为该类赋予“选定值”。

具有MultiFilter（文本输入），MultiFilter选择和预设/预设搜索值的数据表

2 个答案: