I'm sure there are a few (better) ways to do this, but I can't get any way to work. I'm trying to have datatables load new data (from different data source) when a button is clicked.
Here's what I have:
$(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();
});
});
The initial table (from simple4.php) loads fine. I'd like it to change when I click on a button (with id=option2 in this case), but nothing happens when I click the button.
Just in case, here's the button code in case I'm missing something obvious:
<label class=btn btn-default>
<input type=radio name=options id=option2 value=1 autocomplete=off> Compare 1 and 2
</label>
Not sure what the issue is. Any insight would be helpful.
UPDATE: see answers below explanation of the issue. One thing I didn't do, which apparently makes a major difference is using dataTable versus DataTable. You need a capital D and capital T. Here's the fixed code that's working now:
$(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();
});
});
One more thing...my function that was supposed to fire when I clicked on my radio button wasn't working. Had to change from this:
$( #option2 ).click(function() {
table.ajax.url( simple4.php ).load();
});
To this:
$('input[id=option2]').change(function(){
table.ajax.url( simple4.php ).load();
});
