点击按钮后重新加载dataTables

问题描述：

我确定有几个（更好的）方法可以做到这一点，但我无法找到任何工作方式。我试图让数据表单在单击按钮时加载新数据（来自不同的数据源）。点击按钮后重新加载dataTables

这是我有：

$(document).ready(function() { 

    $('#datatable2').dataTable({ 

    "ajax": { 
     "url":"simple4.php", 
     "type":"GET" 
    } , 

    "paging":  true, 
    "pageLength": 20, 
    "order": [[ 2, "asc" ]], 
    "aoColumns": [ 
     { "bSortable": false, "width": "25%" }, 
     { "bSortable": true, "width": "30%" }, 
     { "bSortable": true, "width": "15%" }, 
     { "bSortable": true, "width": "15%" }, 

     { "bSortable": true, "width": "15%" }, 
     { "bSortable": false, "width": "0%", "visible":false }, 

    ], 
    }); 

    $("#option2").click(function() { 
    table.ajax.url('simple3.php').load(); 
    }); 
});

初始表（从simple4.php）加载罚款。当我点击一个按钮（在这种情况下id = option2）时，我希望它改变，但是当我点击按钮时没有任何反应。

以防万一，这里的的情况下，该按钮的代码，我失去了一些东西很明显：

<label class="btn btn-default"> 
<input type="radio" name="options" id="option2" value="1" autocomplete="off"> Compare 1 and 2 
</label>

不知道是什么问题。任何见解都会有所帮助。

更新：请参阅下面的解答问题的解答。有一件事我没有做，这显然是一个主要区别是使用“dataTable”与“DataTable”。你需要一个资本d和资本T.下面是的工作现在固定的代码：

$(document).ready(function() { 
var table = $("#datatable2").DataTable({ 

    "ajax": { 
    "url":"simple3.php", 
    "type":"GET" 
} , 

    "paging":  true, 
    "pageLength": 20, 
"order": [[ 2, "asc" ]], 
    "aoColumns": [ 
    { "bSortable": false, "width": "25%" }, 
    { "bSortable": true, "width": "30%" }, 
{ "bSortable": true, "width": "15%" }, 
    { "bSortable": true, "width": "15%" }, 

    { "bSortable": true, "width": "15%" }, 
    { "bSortable": false, "width": "0%", "visible":false }, 

    ], 

}); 
$("#option2").click(function() { 
table.ajax.url("simple4.php").load(); 
}); 
});

一件事......我的职责本来应该火，当我点击我的单选按钮不能正常工作。只好从：

$("#option2").click(function() { 
table.ajax.url("simple4.php").load(); 
});

要这样：

$('input[id=option2]').change(function(){ 
table.ajax.url("simple4.php").load(); 
});

控制台没有错误？我想你的回调中的变量'table'没有定义。 – MamaWalter 2014-11-14 19:19:03

答

首先，正如其他人所说变量'表'没有设置。

其次，当你调用

var table = $('#datatable2').dataTable({.....})

你是返回，将无法访问任何数据表API

为了得到一个数据表API实例的jQuery对象，你需要拨打电话像这样：

var table = $('#datatable2').DataTable({....});

这应该工作，假设您的网址返回的数据正确形成。

来源：https://datatables.net/faqs/#api

答

我现在不能试试这个，但我认为它会工作：

var table = $('#datatable2').dataTable({...}); 

$("#option2").click(function() { 
    table.ajax.url('simple3.php').load(); 
});

你不设置VAR table = ...所以当你调用table.ajax ...表var不存在

点击按钮后重新加载dataTables

相关推荐