Question

我坚持使用jquery数据表中的简单点。我有下拉选择，根据它，它应该在数据表中填充数据。

尝试1

这是代码。

//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();
   }
});

Jquery DataTable调用下拉列表更改事件问题

1 个答案: