如何在更改功能 jquery 上重新加载 dataTable 并获取值选择选项选择？

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

Reload data for datatable

try code

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

Answer 2

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

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

Answer 3

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 4

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 5

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