pheromix
pheromix

Reputation: 19317

How to set dynamically the Ajax URL of a dataTable?

I'm using jQuery DataTables, my JavaScript code is shown below:

$(document).ready(function() {
   var tbl = $('#table_tabl').DataTable({
      responsive: true,
      "oLanguage": {
         "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt",
      },
      "processing": true,
      "serverSide": true,
      ajax: "<?php  echo RP_SSP ?>server_processing_reservTables.php", // I want to add a parmeter to it dynamically when a select element is selected 
      "aoColumnDefs": [{
         "aTargets": [3],
         "mData": 3,
         "mRender": function(data, type, full) {
            return '<div style="text-align:center;"><a href="RestaurantReservation/reserverTable/' + data + '" title="R&eacute;server"><span class="mif-lock icon"></span></a></div>';
         }
      }],
      "aLengthMenu": [
         [10, 25, 50, 100, -1],
         [10, 25, 50, 100, "Tout"]
      ]
   });
});

I want to filter this dataTable according to the selected value of a select element :

$("#select_id").on("change", function(){
    // set the ajax option value of the dataTable here according to the select's value
});

How to set the ajax option's value of the dataTable in the on_change event of the select element based on the select's selected item ?

Upvotes: 17

Views: 38767

Answers (4)

C&#233;sar Le&#243;n
C&#233;sar Le&#243;n

Reputation: 3050

As documentation says, use: ajax.url()

Some code:

var table = $('#example').DataTable({
                ajax: "data.json"
            });

table.ajax.url('newData.json').load();

.url() will set the new ajax url to get the data from.

.load() will reload the datatable with data from that new url.

Upvotes: 1

Gyrocode.com
Gyrocode.com

Reputation: 58880

SOLUTION 1

Use ajax.url() API method to set the URL that DataTables uses to Ajax fetch data.

$("#select_id").on("change", function(){
    // set the ajax option value of the dataTable here according to the select's value
    $('#table_tabl').DataTable()
       .ajax.url(
          "<?php  echo RP_SSP ?>server_processing_reservTables.php?param=" 
          + encodeURIComponent(this.value)
       )
       .load();
});

SOLUTION 2

Use ajax.data option to add or modify data submitted to the server upon an Ajax request.

var tbl = $('#table_tabl').DataTable({
   // ... skipped other parameters ...
   ajax: {
      url: "<?php  echo RP_SSP ?>server_processing_reservTables.php",
      data: function(d){
         d.param = $('#select_id').val();
      }
   }
});

Upvotes: 23

pheromix
pheromix

Reputation: 19317

I found it :

$("#salle_code").on("change", function(){
                tbl.ajax.url("<?php  echo RP_SSP ?>server_processing_reservTables.php?salle_code="+$(this).val()).load();
            });

Upvotes: 10

Bugfixer
Bugfixer

Reputation: 2617

Datatable Version : 1.10.0-beta.1 Using fnDraw to Redraw the table.

Sample code for using fndraw

$(document).ready(function() {
  var oTable = $('#example').dataTable();

  // Re-draw the table - you wouldn't want to do it here, but it's an example :-)
  oTable.fnDraw();
} );

Source

$(document).ready(function() {
   var tbl = $('#table_tabl').DataTable({
      responsive: true,
      "oLanguage": {
         "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt",
      },
      "processing": true,
      "serverSide": true,
      "sAjaxSource": "<?php  echo RP_SSP ?>server_processing_reservTables.php", // I want to add a parmeter to it dynamically when a select element is selected 
      "aoColumnDefs": [{
         "aTargets": [3],
         "mData": 3,
         "mRender": function(data, type, full) {
            return '<div style="text-align:center;"><a href="RestaurantReservation/reserverTable/' + data + '" title="R&eacute;server"><span class="mif-lock icon"></span></a></div>';
         }
      }],
      "aLengthMenu": [
         [10, 25, 50, 100, -1],
         [10, 25, 50, 100, "Tout"]
      ]
   });

   $("#select_id").change(function () {
          var end = this.value;
          var NTypSource = '<?php  echo RP_SSP ?>server_processing_reservTables?type='+end+'';
          var oSettings = tbl.fnSettings();
          oSettings.sAjaxSource  = NTypSource;
          tbl.fnDraw();
   });

});

Upvotes: 2

Related Questions