Datatables 具有多过滤器（文本输入）、多过滤器选择和预显示/预设搜索值的数据表

我将DataTables与Bootstrap结合使用，以一种很好的方式管理大型表的显示

由于我的目标是获得良好的用户体验，因此我想用一些初始设置打开表格： 1预先填充搜索字段，该字段正在工作 2预选一个列过滤器下拉列表这就是我被卡住的地方

我尝试了在SO和DT论坛上找到的所有解决方案，但都没有成功

这是我的小提琴：

---

我也在Datatables论坛上发布了这个问题，并将合并来自这两个来源的所有答案，以供将来参考，如果有人面临相同的情况

据我所知，您希望预先选择选择过滤器选项。因此，这可能是实现这一目标的解决方案之一

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

}

---

为了演示，请在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*/
        }
      });

可以在这里看到：

---

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

您能否详细说明此预选择列过滤器下拉列表中的一个？这就是我遇到的问题？我不确定我是否遵循了你的要求。谢谢你为我指明了正确的方向。我更新了小提琴，以反映我想要实现的目标：

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*/
        }
      });