重新初始化数据表答案

【问题标题】：Reinitialise DataTable重新初始化数据表
【发布时间】：2019-12-05 06:50:36
【问题描述】：

我在我的 DataTable 中构建了一个过滤器，以便检查状态。我正在使用以下代码来检索状态：

    if(isset($_POST['status']))
    {
        if (!empty($where) ) {
         $where .= "AND status = '". $_POST['status'] ."'";
        } else {
         $where .= "WHERE status = '". $_POST['status'] ."'";
        }
    }
    else{
        if (!empty($where) ) {
         $where .= "AND status = '1'";
        } else {
         $where .= "WHERE status = '1'";
        }
    }

我没有选择数据的问题。当我查看 WebConsole 时，我可以看到脚本正在发布正确的数据并获得正确的响应。

但我对数据的呈现有一些问题。

当响应正确时，我想更新我的 DataTable。

我正在使用以下代码来更新我的数据表：

      success:function(data){
        $('#tb1').DataTable(data);
      }

当我执行此代码时，我会收到一条 DataTables 警告：

DataTables warning: table id=tb1 - Cannot reinitialise DataTable.

我无法弄清楚我的脚本有什么问题。查看多个示例脚本应该可以工作。有人知道我的脚本有什么问题以及如何解决这个问题吗？

这是我的完整脚本：

    <script type="text/javascript">
     $( document ).ready(function() {
      $('#tb1').DataTable({
       "bprocessing": true,
       "serverSide": true,
    "ajax": {
    "url": "./Response1.php",
    "type": "POST",
    "error": function(){
    $("#grid_processing").css("display","none");
    }
    }     
      });   
      $("div.toolbar1").html('<select id="status" type="status"><option value="1">Active</option><option value="0">Inactive</option></select>');

      $("#status").on('change',function () {

    var val = $(this).val();
    $.ajax({
      url: './Response1.php',
      type: 'POST',
      data: 'status='+val,
      success:function(data){
        $('#tb1').DataTable(data);
      }
    });
      });
     });
    </script>

【问题讨论】：

datatables.net/manual/tech-notes/3
我尝试了所有这些选项。唯一的“工作”选项是table.destroy(); 函数。它确实改变了我的数据表的布局，但它没有改变我的数据表中的数据
您对 ajax 请求有何期待？
@John，destroy 仅用于更改表的某些选项，刷新数据，您可以这样做：stackoverflow.com/questions/27778389

标签： javascript jquery ajax datatables

【解决方案1】：

更新了解释和参考

不需要单独的 Ajax 请求。坚持Datatables Ajax option 就足够了。

我们可以使用 Datatables ajax.data 选项将add additional data 用于请求，或者在需要时将to modify the data object 提交到服务器。

要使用new and refresh data input，我们需要使用ajax.data as a function，否则它会被初始化为一个静态对象，只会计算一次。

var table = $('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( data) {
        //your data altering codes
    }
  }
} );

然后使用 Datatables ajax.reload() 在事件调用中从 Ajax 数据源重新加载表数据。

使用 Datatables ajax.data 更新数据请求的可能方法是：

直接使用元素值

var table = $('#example').dataTable({
    "ajax": {
        "url": "data.json",
        "data": function(data) {
            data.status = $('#status').val();
        }
    }
});
table.ajax.reload();

在数据表之前使用可以在事件调用中更改的全局变量ajax.reload()

var global_status = 1;
var table = $('#example').dataTable({
    "ajax": {
        "url": "data.json",
        "data": function(data) {
            data.status = global_status;
        }
    }
});

$("#status").on('change', function() {
    global_status = $(this).val();
    table.ajax.reload();
});

示例演示：

$.mockjax({
    url: "Response1.php",
    response: function(settings) {
        // Investigate the `settings` to determine the response...
        if (settings.data.status == 1) {
            this.responseText = {
                "draw": settings.data.draw,
                "recordsTotal": 57,
                "recordsFiltered": 57,
                "data": [
                    [
                        "Airi",
                        "Satou",
                        "Accountant",
                        "Tokyo",
                        "28th Nov 08",
                        "1"
                    ],
                    [
                        "Angelica",
                        "Ramos",
                        "Chief Executive Officer (CEO)",
                        "London",
                        "9th Oct 09",
                        "1"
                    ],
                    [
                        "Ashton",
                        "Cox",
                        "Junior Technical Author",
                        "San Francisco",
                        "12th Jan 09",
                        "1"
                    ],
                    [
                        "Bradley",
                        "Greer",
                        "Software Engineer",
                        "London",
                        "13th Oct 12",
                        "1"
                    ],
                    [
                        "Brenden",
                        "Wagner",
                        "Software Engineer",
                        "San Francisco",
                        "7th Jun 11",
                        "1"
                    ],
                    [
                        "Brielle",
                        "Williamson",
                        "Integration Specialist",
                        "New York",
                        "2nd Dec 12",
                        "1"
                    ],
                    [
                        "Bruno",
                        "Nash",
                        "Software Engineer",
                        "London",
                        "3rd May 11",
                        "1"
                    ],
                    [
                        "Caesar",
                        "Vance",
                        "Pre-Sales Support",
                        "New York",
                        "12th Dec 11",
                        "1"
                    ],
                    [
                        "Cara",
                        "Stevens",
                        "Sales Assistant",
                        "New York",
                        "6th Dec 11",
                        "1"
                    ],
                    [
                        "Cedric",
                        "Kelly",
                        "Senior Javascript Developer",
                        "Edinburgh",
                        "29th Mar 12",
                        "1"
                    ]
                ]
            }
        }
        if (settings.data.status == 0) {
            this.responseText = {
                "draw": settings.data.draw,
                "recordsTotal": 57,
                "recordsFiltered": 57,
                "data": [
                    [
                        "Airi",
                        "Satou",
                        "Accountant",
                        "Tokyo",
                        "28th Nov 08",
                        "0"
                    ],
                    [
                        "Angelica",
                        "Ramos",
                        "Chief Executive Officer (CEO)",
                        "London",
                        "9th Oct 09",
                        "0"
                    ],
                    [
                        "Ashton",
                        "Cox",
                        "Junior Technical Author",
                        "San Francisco",
                        "12th Jan 09",
                        "0"
                    ]
                ]
            }
        }
    }
});



$(document).ready(function() {
    var req_status = 1;
    var table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "paging":   false,
        "ordering": false,
        "info":     false,
        "searching": false,
        "ajax": {
            "url": "Response1.php",
            "type": "POST",
            "data": function(data) {
                data.status = req_status;
            }
        },
    });

    $("div.toolbar1").html('<select id="status" type="status"><option value="1">Active</option><option value="0">Inactive</option></select>');

    $("#status").on('change', function() {
        req_status = $(this).val();
        table.ajax.reload();
        console.log('Status Val',table.ajax.params().status);
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<div class="toolbar1"></div>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Status</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Status</th>
            </tr>
        </tfoot>
    </table>

【讨论】：

【解决方案2】：

试试这个

$("#tb1").dataTable().fnDestroy();
$("#tb1").html(data);
$("#tb1").DataTable();

【讨论】：

【解决方案3】：

在服务器端之后添加这个：true，

destroy: true

初始化后销毁表

【讨论】：

【解决方案4】：

尝试使用单个调用

function initTable(tableId, apiUrl){
 var table_element = "#" + tableId;
 if ($.fn.DataTable.isDataTable(table_element )) {
    //remove datatable framework on the table so we can re-initialize new record
      $(table_element).DataTable().clear().destroy();
      $(table_element).html(''); //empty the table entirely
    }
//re-initialize table
     var table = $(table_element).DataTable({
                "destroy": true,
                "bprocessing": true,
                "serverSide": true,
                "ajax": {
                "url": apiUrl,
                "type": "POST",
                "error": function(){
                  $("#grid_processing").css("display","none");
                  }
               }     
          });   
      }

像这样从任何地方调用函数

initTable('tb1','./Response1.php');

【讨论】：