DataTables 1.10.7未加载YADCF插件

Question

根据标题，我有一个html表，我正在使用jQuery DataTables插件格式化它。我还使用YADCF插件来生成单独的列排序功能。

问题是我不能让任何搜索函数出现在我的表头中(也不能出现在表尾)。我正在尝试在表中的每一列下面获得一个文本搜索字段。

我使用的是YADCFv0.8.7和jQuery 1.10.2的DataTables v1.10.7。

我在html文件中包含了YADCF css和脚本文件：

<link rel="stylesheet" href="lib/yadcf/jquery.dataTables.yadcf.css" />
<script src="lib/yadcf/jquery.dataTables.yadcf.js" ></script>

当我检查我的网页的源代码时，它们都在加载，并且它们在那里是可见的。

我的表有以下html配置：

<table id="myTable" class="table-hover table-bordered">
    <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
        </tr>
    </tfoot>
</table>

我的JavaScript配置如下所示：

$(document).ready(initTable);

function initTable() {
    var myTable = $('#myTable').DataTable({
          "processing": true,
          "serverSide": true,
          "ajax": {
              // config for data going to the server
              "url": "/loadTable",
              "method": "POST",
              "data": function (data) {
                  return JSON.stringify(data);
              },

              // config for data coming back from the server
              "dataType": "json",
              "dataSrc": function (json) {
                  var jsObj = $.parseJSON(json);
                  return jsObj.data;
              }
          },
          "columns": [
              {
                  "name": "name1",
                  "data": "key_column1",
                  "defaultContent": "(no data)"
              },
              {
                  "name": "name2",
                  "data": "key_column2",
                  "defaultContent": "(no data)"
              },
              {
                  "name": "name3",
                  "data": "key_column3",
                  "defaultContent": "(no data)"
              },
              {
                  "name": "name4",
                  "data": "key_column 4",
                  "defaultContent": "(no data)"
              },
              {
                  "name": "name5",
                  "data": "key_column5",
                  "defaultContent": "(no data)"
              },
              {
                  "name": "name6",
                  "data": "key_column6",
                  "defaultContent": "(no data)"
              }
          ],
          "dom": '<f><lip><rt><ip>',
          "language": {
              "search": "Search:"
          },
          "pagingType": "full_numbers"
      });
    yadcf.init(myTable, [{
              column_number: 0,
              filter_type: "text"
          }, {
              column_number: 1,
              filter_type: "text"
          }, {
              column_number: 2,
              filter_type: "text"
          }, {
              column_number: 3,
              filter_type: "date"
          }, {
              column_number: 4,
              filter_type: "text"
          }, {
              column_number: 5,
              filter_type: "text"
          }]);
  }
 }

据我所知，我在DataTable上正确地调用了init函数，但是当我包含init()调用时，绝对没有任何反应。我没有得到任何错误，并且在FireBug控制台中也没有错误。

我读过其他文章，人们实际上收到了一个错误，可能是因为他们正在使用旧版本的DataTables和新的init()函数，反之亦然，但我的情况并非如此。

我甚至调试了YADCF的源文件，我可以看到创建要添加到表头的元素的代码被调用，但由于某种原因，我从未在表本身中看到任何内容。

在这种情况下，服务器端配置应该是无关紧要的，因为它只提供表的数据，与表的可视配置无关。所以我不认为问题出在那里。

请帮帮忙。

Answer 1

尝试使用Datatable的init事件：

myTable.on( 'init.dt', function () {
        yadcf.init(myTable, [{...}]);
});

这将强制yadcf在初始化自身之前等待DataTable初始化的结束