0

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

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

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

这张http://imgur.com/fi6Y8rz图片显示了当用空 json 重新加载表时过滤器标题中先前值的混搭。

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

{ 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
    ]
});
4

1 回答 1

0

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

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);
}
于 2013-04-22T14:06:45.360 回答