javascript - 重新加载 DataTable.js fnServer fnDraw

Question

首先，我通过以下代码启动所有数据表(还有更多选项，但我为这个示例添加了一个最小值)。下面的代码正在运行并启动所有数据表，如果数据表有搜索，它将使用参数初始化 fnServerParams。 (参数将转到代码隐藏和工作中的函数)。

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var e = {
            sPaginationType: "full_numbers",
        };
        // If has external filters
        if(!!jQuery(this).data("searchbox")) {
            var search_box = jQuery(jQuery(this).data("searchbox"));

            var additional_filters = [];
            jQuery.each(search_box.find('input,select'), function(i, v){
                additional_filters.push({
                    name: jQuery(v).attr('name'),
                    value: jQuery(v).val()
                });
            });

            if (additional_filters.length > 0) {
                e.fnServerParams = function (aoData) {
                    for (var i=0; i < additional_filters.length; i++) {
                        var filter = additional_filters[i];
                        aoData.push( { "name": filter.name, "value": filter.value } );
                    }
                }
            }
        }
        jQuery(this).dataTable(e);
    });
}

问题是当我通过单击/更改事件调用我的函数 RefreshDataTables() 时。在函数中我使用了这个简化版本来刷新:

PS:下面的所有代码都将被解释为 inside RefreshDataTables()

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var $oTable = jQuery(this).dataTable();
        $oTable.fnDraw();
    });
}

但它不会更新搜索输入/选择的更改。它与以前保持一致。所以我在 this answer 上尝试了这段代码:

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var $oTable = jQuery(this).dataTable();
        var search_box = jQuery(jQuery(this).data("searchbox"));

        var additional_filters = [];

        jQuery.each(search_box.find('input,select'), function(i, v){
            additional_filters.push({
                name: jQuery(v).attr('name'),
                value: jQuery(v).val()
            });
        });

        if (additional_filters.length > 0) {
            $oTable._fnServerParams = function (aoData) {
                for (var i=0; i < additional_filters.length; i++) {
                    var filter = additional_filters[i];
                    aoData.push( { "name": filter.name, "value": filter.value } );
                }
            }
        }
        $oTable.fnDraw();
    });
}

但是没有用。没有错误，但数据还是一样，没有任何变化。

Answer 1

您在初始化期间仅查询一次 INPUT 和 SELECT 的值。相反，您应该在每次从服务器请求数据时都这样做。

因此，您可以修改初始化代码，以便在每次调用用 fnServerParams 定义的函数时检索 INPUT 和 SELECT 值。

下面我只是将您的代码移到了 fnServerParams 回调中。

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var e = {
            sPaginationType: "full_numbers",
            fnServerParams: function(aoData){
                // If has external filters
                if(!!jQuery(this).data("searchbox")) {
                    var search_box = jQuery(jQuery(this).data("searchbox"));

                    var additional_filters = [];
                    jQuery.each(search_box.find('input,select'), function(i, v){
                        additional_filters.push({
                            name: jQuery(v).attr('name'),
                            value: jQuery(v).val()
                        });
                    });

                    if (additional_filters.length > 0) {
                        for (var i=0; i < additional_filters.length; i++) {
                            var filter = additional_filters[i];
                            aoData.push( { "name": filter.name, "value": filter.value } );
                        }
                    }
                }
            }
        };

        jQuery(this).dataTable(e);
    });
}

然后您的 RefreshDataTables() 调用 $oTable.fnDraw() 应该可以工作。

有关代码和演示，请参见下面的示例。请注意，我正在使用 jQuery Mockjax插件只是为了演示 Ajax 请求，生产代码不需要它。

$(document).ready(function() {
  // AJAX emulation for demonstration only
  $.mockjax({
    url: '/test/0',
    responseTime: 200,
    response: function(settings) {
      console.log("Request data: ", settings.data);

      this.responseText = {
        "aaData": [
          [
            "Trident",
            "Internet Explorer 4.0",
            "Win 95+",
            "4",
            "X"
          ],
          [
            "Trident",
            "Internet Explorer 5.0",
            "Win 95+",
            "5",
            "C"
          ],
          [
            "Trident",
            "Internet Explorer 5.5",
            "Win 95+",
            "5.5",
            "A"
          ]
        ]
      };
    }
  });

  
  $('#example').dataTable({
    "sAjaxSource": "/test/0",
    "bServerSide": true,
    "fnServerParams": function(aoData) {

      // If has external filters
      if (!!jQuery(this).data("searchbox")) {
        var search_box = jQuery(jQuery(this).data("searchbox"));

        var additional_filters = [];
        jQuery.each(search_box.find('input,select'), function(i, v) {
          additional_filters.push({
            name: jQuery(v).attr('name'),
            value: jQuery(v).val()
          });
        });

        if (additional_filters.length > 0) {
          for (var i = 0; i < additional_filters.length; i++) {
            var filter = additional_filters[i];
            aoData.push({
              "name": filter.name,
              "value": filter.value
            });
          }
        }
      }
    }
  });
  
  $('#btn').on('click', function(){
     $('#example').dataTable().fnDraw();  
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
  <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>

</head>

<body>
  <p id="searchbox">
    <input type="text" name="param1" value="" placeholder="param1">
    <button id="btn" type="button">Search</button>
  </p>
  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" data-searchbox="#searchbox">
    <thead>
      <tr>
        <th width="20%">Rendering engine</th>
        <th width="25%">Browser</th>
        <th width="25%">Platform(s)</th>
        <th width="15%">Engine version</th>
        <th width="15%">CSS grade</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
    <tfoot>
      <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
      </tr>
    </tfoot>
  </table>
</body>

</html>