Jquery DataTable 在下拉更改事件问题中调用

Question

我被困在 jquery 数据表中的简单点上。我有下拉选择，根据它，它应该必须在数据表中填充数据。

试一试

这里是代码。

//code in $(document).ready(function () { ............
$("#drpRestaurants").on('change', function () {
    var restId = $(this).val();
    getBranches(restId);

});

 //ajax call of datatable
function getBranches(restId) {

    var data1 = { "restaurantId": restId };

    resturantBranchTable = $("#BranchList").DataTable({
        "ajax": {
            "url": serverLocation + "/api/dashboard/getBranches",
            "type": "post",
            "data": JSON.stringify(data1),
            "dataSrc": ""
        },
        "ordering": false,
        columns: [
            { title: 'Id', data: 'id' },
            { title: 'Restaurant', data: 'restaurant.restaurantName' },
            { title: 'Branch Location', data: 'brachLocation' },
            { title: 'Branch Address', data: 'brachAddress' },
            { title: 'Contact No', data: 'telephoneNo' },
            { title: 'Is Active', data: 'isActive' }
        ],
    });    
}

当我第一次选择时，它成功地将数据填充到数据表中。但是当我要选择第二次时，它会抛出一个错误。 （下面我复制粘贴）

DataTables 警告：table id=BranchList - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3

错误只是说，问题是我要重新初始化数据表。但我缺乏这样做的知识。我知道，在 document.ready 中可以像 beolw 一样初始化数据表。

resturantBranchTable = $("#BranchList").DataTable();

但在这种情况下，如何在下拉更改事件中进行数据绑定？

尝试 2

  //document.ready function

   var data1 = { "restaurantId": restId };

    resturantBranchTable = $("#BranchList").DataTable({
        "ajax": {
            "url": serverLocation + "/api/dashboard/getBranches",
            "type": "post",
            "data": JSON.stringify(data1),
            "dataSrc": ""
        },
        "ordering": false,
        columns: [
            { title: 'Id', data: 'id' },
            { title: 'Restaurant', data: 'restaurant.restaurantName' },
            { title: 'Branch Location', data: 'brachLocation' },
            { title: 'Branch Address', data: 'brachAddress' },
            { title: 'Contact No', data: 'telephoneNo' },
            { title: 'Is Active', data: 'isActive' }
        ],
    });   


   //drop down change event
   $("#drpRestaurants").on('change', function () {
       restId = $(this).val(); //This restId  is global variable
       resturantBranchTable.ajax.reload();
   });

这也行不通....

尝试 3（解决方案）

我刚刚找到了一个更好的解决方案。 （老实说，我不知道这是否更好。这对我来说效果如何）。

首先在文档就绪函数中初始化数据表。

resturantBranchTable = $('#BranchList').DataTable({

    columns: [
            { title: 'Id', data: 'id' },
            { title: 'Restaurant', data: 'restaurant.restaurantName' },
            { title: 'Branch Location', data: 'brachLocation' },
            { title: 'Branch Address', data: 'brachAddress' },
            { title: 'Contact No', data: 'telephoneNo' },
            { title: 'Is Active', data: 'isActive' }
        ],

});

然后我们可以像这样从ajax调用中获取数据并绑定数据。

$.ajax({
        type: 'post',
        url: serverLocation + "/api/dashboard/getBranches",
        dataType: 'json',
        data: JSON.stringify(requestJson),
        contentType: "application/json; charset=UTF-8",
        success: function (response) {
            resturantBranchTable.clear().draw(); //clear the data table 
            resturantBranchTable.rows.add(response).draw(); //after clearing, bind data
        },
        error: function (textStatus, errorThrown) {
            console.log('Err');
        }
    });

希望这对其他坚持自己项目的人有所帮助。

Answer 1

将初始调用与刷新/重新加载调用分开，使用指向 DataTable 的变量的值或非值作为您的分支。

var resturantBranchTable;

$("#drpRestaurants").on('change', function () {
   restId = $(this).val(); //This restId  is global variable
   if (!resturantBranchTable) {
       getBranches(restId);
   } else {
      resturantBranchTable.ajax.reload();
   }
});