How to pass value of an HTML element to 'ajax' option during datatable initialization
How to pass value of an HTML element to 'ajax' option during datatable initialization
Vibhu_Sharma
Posts: 3Questions: 1Answers: 0
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>
This discussion has been closed.
Answers
Hi @Vibhu_Sharma ,
The
ajax.datashould be within the Ajax object, so something like:Cheers,
Colin
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.
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
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:
How can I tackle this because the HTML select does not exist before the creation of datatable?
Hi @Vibhu_Sharma ,
The value would be
undefinedas it doesn't exist. So, you could either modify your server-side script to handleundefined, or, you modify the functionajax.datato return a default value instead ofundefined,Cheers,
Colin