Question

我正在为我的项目使用Dynamically load a JavaScript file。它在页面加载时运行良好。

我有一个场景，我必须在下拉列表更改时调用数据表。我已经浏览了十几个站点，但没有得到所需的解决方案。

初始化数据表代码

$(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 () {
            ...
        }

    });

});

在下拉列表更改时调用数据表

 $(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进行演示。

在下拉列表更改时调用jquery Datatable

1 个答案: