Вызов jquery Datatable при изменении выпадающего меню

Question

Я использую Jquery Datatable для своих проектов. Он хорошо работает на загрузке страницы.

У меня есть сценарий, в котором я должен назвать datatable при изменении выпадающего списка. Я прошел через десяток сайтов, но не получил желаемого решения.

Intializing код DataTable

$(function(){ 

    //Datatable function 
    var url = $(".dTable").data("url"); 
    var currFinYear = $("#ddlFinYearList").val(); 

    table = $(".dTable").dataTable({ 
     "bProcessing": true,//to show processing word 
     "autoWidth": false,//to adjust width 

     "aaSorting": [[8, 'desc']], 
     "ajax": { 
      "url": url, 
      "method": "GET", 
      "dataType": "json", 
      "data": { 
       finYear: currFinYear 
      } 
     }, 

     columns: [ 
      ... 
      ... 
     ], 

     //Defining checkbox in columns 
     "aoColumnDefs": [ 
      ... 
     ], 

     "fnRowCallback": function (nRow, aData, iDisplayIndex) { 
      ... 
     }, 

     "fnDrawCallback": function() { 
      ... 
     } 

    }); 

}); 

Calling Datatable на изменение ниспадающего

$(document).on("change", "#ddlFinYearList", function() { 

     $('.dTable').dataTable().fnDraw(); 
     ///How can I call the datatable here 

}); 

Answer 1

Вы должны указать функцию для ajax.data вариант, что так оно и будет вызываться каждый раз, когда таблица перерисовывается. В этой функции вы должны получить значение выпадающего элемента управления и присвоить его объекту finYear объекта запроса d.

"ajax": { 
    "url": url, 
    "method": "GET", 
    "dataType": "json", 
    "data": function(d){ 
     d.finYear = $("#ddlFinYearList").val(); 
    } 
}, 

Затем вам нужно перерисовать таблицу каждый раз при изменении значения управления раскрывающимся списком.

$("#ddlFinYearList").on("change", function() { 
    $('.dTable').DataTable().ajax.reload(); 
}); 

См. this jsFiddle для демонстрации.