Reload dataTables after button click

Question

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

no error in the console ? the variable table in your callback is not defined i think. — MamaWalter
– MamaWalter, Commented Nov 14, 2014 at 19:19

Tony A · Accepted Answer · 2014-11-14 22:24:22Z

2

First, as the others have said the variable 'table' is not set.

Second, when you call

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

You are returning a jQuery object that won't have access to any of the DataTables API

To get a DataTables API instance you need to make a call like this:

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

This should work, assuming that your data returned by your url is properly formed.

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

answered Nov 14, 2014 at 22:24

Tony A

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thiago Cordeiro · Accepted Answer · 2014-11-14 19:23:55Z

2

I can't try this now, but I think it gonna work:

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

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

you are not setting var table = ... so when you call table.ajax... table var does not exists

answered Nov 14, 2014 at 19:23

Thiago Cordeiro

6195 silver badges9 bronze badges

Collectives™ on Stack Overflow

Reload dataTables after button click

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related