How to pass value of an HTML element to 'ajax' option during datatable initialization

Vibhu_Sharma

I have created a datatable and have given it an ajax URL for server processing. I have an additional requirement now where I need to update the contents of datatable depending on the value selected from an HTML dropdown element.

I don't know how to grab the selected value of an HTML dropdown and pass it to datatable so it can be used in AJAX server request.

Basically, I want the datatable to be instantly updated with new data when a user selects a value from the dropdown.

I tried making "data" field as function but all I am able to do in that function is send a key-value pair field in the request. I could not retrieve the value of HTML select in the data function.

I tried this -

var table = $('#datatable8').DataTable({
"dom": 'T<"clear">lrBtip',
"ajax": {
"url": ajaxURL,
"data": {
  "searchType": $('#selectdays').val()
  }
},
"order": [[2, 'asc']],
"columns": dtcols,
"buttons": [
{
  text: 'Download',
  id: 'downloadbutton',
  className: 'btn ink-reaction btn-flat table-button',
  action: function() {
    var type = $('#selectdays').val();
    location.href = '/admin/reports/lease/'+type;
  }
}
],
"serverSide": true,
"processing": true,
"searching": true,
"stateSave": true,
"paging": true,
"language": {
"lengthMenu": '_MENU_ entries per page',
"search": '<i class="fa fa-search"></i>',
"paginate": {
  "previous": '<i class="fa fa-angle-left"></i>',
  "next": '<i class="fa fa-angle-right"></i>'
}
},
"createdRow": function(row, data) {
//attach site id to a row so we can reference it when clicking 
buttons etc
$(row).attr('data-siteid', data["siteid"]);

if(data["deactivatedat"]) {
  $(row).find('.btn.disable-asset').removeClass('btn- 
flat').addClass('btn-danger').removeClass('disable- 
asset').addClass('enable-asset').text('RE-ENABLE');
}
}
});

This is my HTML dropdown element:

<select class="form-control" id="selectdays">
<option value="1">Please Select</option>
<option value="2">30 Days Report</option>
<option value="3">60 Days Report</option>
<option value="0">90 Days Report</option>
</select>

colin

Hi @Vibhu_Sharma ,

The ajax.data should be within the Ajax object, so something like:

    ajax: {
      url: ajaxURL,
      data: {
        days: $('#selectdays').val()
      }
    },

Cheers,

Colin

Vibhu_Sharma

Hi @colin

Thanks for your Input. I tried it. But I want this data (variable days) to be passed to my server side in the request object. But when I console.log(req), I don't see it anywhere in the request object.

colin

Hi @Vibhu_Sharma ,

I just tried it here - check the network tab in the browser's developer's tools. You'll see it's passing "days: 2" in the query string parameters on the first call, then 3 on the second. I've added it into a function so the value can be changed.

Cheers,

Colin

Vibhu_Sharma

Hi @colin

Thanks a ton. It helped a lot in understanding how to use "data' as a function. Although I just have one question now. My select dropdown is not in a separate HTML. I create Select dropdown in the header of datatable during the initialization of datatable by following:

$('<div class="pull-left" style="width:160px;">' +
'<select class="form-control" id="selectdays">'+
'<option value="1">Please Select</option>'+
'<option value="2">30 Days Report</option>'+
'<option value="3">60 Days Report</option>'+
'<option value="0">90 Days Report</option>'+
'</select>' + 
'</div>').appendTo("#datatable8_wrapper .dt-buttons");

$(".dt-buttons label").addClass("pull-left");

How can I tackle this because the HTML select does not exist before the creation of datatable?

colin

Hi @Vibhu_Sharma ,

The value would be undefined as it doesn't exist. So, you could either modify your server-side script to handle undefined, or, you modify the function ajax.data to return a default value instead of undefined,

Cheers,

Colin