2016-01-22 92 views
0

我为我的项目使用了Jquery Datatable。它在页面加载时运行良好。在下拉列表中调用jquery Datatable

我有一个场景,我不得不调用下拉change.Data数据表我经历了十几个网站,但没有得到所需的解决方案。

Intializing的数据表

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

    }); 

}); 

调用上下拉变化的DataTable代码

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

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

}); 

回答

0

你需要指定一个功能ajax.data选项,这样它会被称为每次表被重新绘制。在该功能中,您必须获取下拉控件的值并将其分配给请求对象d的属性finYear

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

然后,你需要在每次重绘表下拉控制值的变化。

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

查看this jsFiddle进行论证。

+0

Thanks for the reply.I尝试了上面的代码在下拉式变化,但它不工作,我做了什么来解决这个问题是''数据表达式代码'包裹在一个函数内,并在'fnDestroy() ;' – ksg