How to reload dataTable on change funtion jquery and get value selected option select?

Question

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>

Answer 1

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

Answer 2

Reload data for datatable

try code

$('#month_report').change( function() {
    var month = $(this).val();
    table.ajax.url('dashboard/report?month='+month).load();});

Answer 3

$("#month_report").on('change', function() {
    if ($(this).val() > 0){
        var month = $(this).val();
        table.ajax.url('dashboard/report?month='+month);
        table.ajax.reload();
    } 
});

Answer 4

Following line will give you the selected value of dropdown having id=month_report

var month = $("#month_report").val();