Обновить данные Таблицы после нажатия кнопки

Question

Я уверен, что есть несколько (лучших) способов сделать это, но я не могу работать. Я пытаюсь, чтобы данные загружали новые данные (из разных источников данных) при нажатии кнопки.

Вот что у меня есть:

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

Answer 1

Во-первых, как говорили другие, переменная 'table' не задана.

Во-вторых, когда вы звоните

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

Вы возвращаете объект JQuery, который не будет иметь доступ к любому из DataTables API

Чтобы получить экземпляр API DataTables вам нужно сделать звонок например:

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

Это должно работать, считая, что ваши данные, возвращаемые вашим URL-адресом, правильно сформированы.

https://datatables.net/faqs/#api

Answer 2

Я не могу попробовать это сейчас, но я думаю, что это сработает:

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

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

вы не настройки вар table = ... поэтому, когда вы вызываете table.ajax ... table var не существует