如何在更改函数 jquery 上重新加载 dataTable 并获取值选择选项选择？答案

【问题标题】：How to reload dataTable on change funtion jquery and get value selected option select?如何在更改函数 jquery 上重新加载 dataTable 并获取值选择选项选择？
【发布时间】：2017-04-10 12:38:25
【问题描述】：

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

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".该怎么做？

这是我的代码：

$(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>

【问题讨论】：

var 月 = $(this).val(); $('#month_report').val(月)

标签： javascript jquery datatable datatables

【解决方案1】：

为数据表重新加载数据

试试代码

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

【讨论】：

【解决方案2】：

以下行将为您提供具有 id=month_report 的下拉列表的选定值

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

【讨论】：

【解决方案3】：

将您的 ajax 调用放在 '.change (function() {})' 下，调用您的 'action' 方法，并最终根据您的情况绘制数据表。

多少，会是这样的：

    $('#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}]
             });
          }
      });

这是my issue

【讨论】：

【解决方案4】：

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

【讨论】：