Question

我将一个json对象传递给一个创建数据表的函数。我正在使用columnFilter为每个列添加过滤器，并使用数组来填充过滤器列表。

我在这里有一张图片http://imgur.com/ehV6lZP，显示了一个很好的过滤器。

问题是如果我用一个新的json调用该函数，列过滤器会变成一个包含前一个过滤器值的大字符串。即使我将数组长度设置为0并且json为空，也会发生这种情况。

当使用空json重新加载表时，此http://imgur.com/fi6Y8rz图片会显示过滤器标头中以前值的混搭。

在网上的很多例子中，我看到有人使用这个：

{ type: "select"}

这似乎为他们建立了清单，但它对我不起作用。除了重新加载表格之外，这种方法似乎还不错。

我正在寻找关于每次调用此函数时如何清除这些过滤器选择的指导。

function popNoteTable(oJson) {
  //these store the unique values for filtering columns
  var oTitles = [];
  var oLocs = [];
  var oSigned = [];

  if (oJson.M_REC.NOTE.length > 0) {
    oTitles = getUniqueJsonValuesByCol("S_TITLE", oJson.M_REC.NOTE);
    oLocs = getUniqueJsonValuesByCol("S_FACILITY", oJson.M_REC.NOTE);
    oSigned = getUniqueJsonValuesByCol("S_SIGNED_BY", oJson.M_REC.NOTE);
  } else {
    oTitles.length = 0;
    oLocs.length = 0;
    oSigned.length = 0;
  }

  var oTable = $('#example').dataTable({
    "bFilter": true,
    "iDisplayLength": 50,
    "bProcessing": true,
    "bDestroy": true,
    "aaData": oJson.M_REC.NOTE,
    "bAutoWidth": false,
    "aoColumns": [
      {"mDataProp": "S_TITLE"},
      {"mDataProp": "S_FACILITY"},
      {"mDataProp": "S_SIGNED_BY"},
      {"mDataProp": "S_SIGN_DT_TM"},
      {"mDataProp": "F_EVENT_ID", "bVisible": false}
    ]
    }).columnFilter({
    sPlaceHolder: "head:before",
    aoColumns: [
      {type: "select", values: oTitles},
      {type: "select", values: oLocs},
      {type: "select", values: oSigned},
      null,
      null
    ]
});

Answer 1

好的，所以我发现过滤功能必须以某种方式修改我的表头。如果我重新定义我的表，通过调用以下函数，在调用上述函数来执行数据表之前，一切正常。

function defineTable() {
  var sTable
    = '<table id="example" class="display" cellpadding="0" cellspacing="0" border="1" width="100%">' +
    ' <thead>' +
    '   <tr>' +
    '     <th>Note Title</th>' +
    '     <th>Facility</th>' +
    '     <th>Signed By</th>' +
    '     <th>Signed Dt/Tm</th>' +
    '     <th>Event Id</th>' +
    '   </tr>' +
    '   <tr>' +
    '     <th>Note Title</th>' +
    '     <th>Facility</th>' +
    '     <th>Signed By</th>' +
    '     <th>Signed Dt/Tm</th>' +
    '     <th>Event Id</th>' +
    '   </tr>' +
    ' </thead>' +
    ' <tbody></tbody>' +
    ' <tfoot>' +
    '   <tr>' +
    '     <th>Note Title</th>' +
    '     <th>Facility</th>' +
    '     <th>Signed By</th>' +
    '     <th>Signed Dt/Tm</th>' +
    '     <th>Event Id</th>' +
    '   </tr>' +
    ' </tfoot>' +
    '</table>';

  $('#notesTable').html(sTable);
}

如何清除Datatables columnFilter选择列表？

1 个答案: