How to reload dataTable on change funtion jquery and get value selected option select?
at first load I set var month to value 0, but when Select change I want to get value of selected option and set var month to value of id="month_report". how to do that?
Here my code:
$(document).ready(function(){
var month = 0;
var table = $('#dataTables').DataTable({
responsive:true,
ajax : {
url : 'dashboard/report?month='+month,
data : function(data){
return data;
}
},
"searching": false,
columns : [
{
data: 'customer',
searchable : false
},
{
data: 'age',
searchable : false
},
{
data: 'pbw',
searchable : false
},
{
data: 'per',
searchable : false
},
{
data: 'ipo',
searchable : false
}
]
});
$('#month_report').change( function() {
var month = $(this).find('option:selected').val();
table.ajax.reload().draw();
});
});<select name="month" id="month_report">
<option value="" selected="">Pilih Bulan :</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>Reload data for datatable
try code
$('#month_report').change( function() {
var month = $(this).val();
table.ajax.url('dashboard/report?month='+month).load();});
Following line will give you the selected value of dropdown having id=month_report
var month = $("#month_report").val();
put your ajax call under '.change (function() {})', call your 'action' method and, eventually, draw your datatable with your circumstances.
More less, it will like this:
$('#month_report').change( function() {
var month = $(this).find('option:selected').val();
$.ajax({
type: 'GET', //'POST'
url: '@Url.Action("your_action")',
data: { ID: month },
success: function (data) {
//drawing your datatable here....
$('#dataTables').DataTable({
destroy: true,
responsive:true,
data: data,
searching: false,
columns : [
{data: 'customer', searchable : false},
{data: 'age', searchable : false},
{data: 'pbw', searchable : false},
{data: 'per', searchable : false},
{data: 'ipo', searchable : false}]
});
}
});
this was my issue