从Datatables中的Custom Select字段发送自定义数据

时间:2016-08-01 10:07:08

标签: javascript jquery ajax datatables

我在自己的数据表中创建了一个自定义选择字段

html = '<div class="col-md-3"><select id="filterleads" class="filterleads form-control">';
        html += '<option value="all">All Leads</option>';
        html += '<option value="processed">Processed Leads</option>';
        html += '<option value="unprocessed">Unprocessed Leads</option>';
        html += '</select></div>';

         $("div.toolbar").html(html);

看起来像这样 enter image description here

现在当选择更改时,我希望它使用数据表ajax发送它的值,这样我就可以根据那个过滤记录

这就是我这样做的方式

var table = $('#allleadstable').DataTable( {
            "processing": true,
            "serverSide": true,
            "responsive": true,
            "iDisplayLength": 50,
            "sScrollX": "100%",
            "order": [[ 1, "desc" ]],
            "sScrollXInner": "100%",
            "bScrollCollapse": true,
            "ajax": {
                url:"/leads",
                data: {
                    "leadfilter": ($("#filterleads").val() ? $("#filterleads").val() : 'all')
                        }
            },
            "scrollX":true,
            "scrollCollapse": true,
            //"sDom": '<"top"flip>rt<"bottom"flip><"clear">',
            "dom": '<"toolbar">frtip',
            columnDefs: [
                { width: 60, targets: 0 },
                { width: 50, targets: 1 },
                { width: 50, targets: 2 },
                { width: 150, targets: 3 },
                { width: 150, targets: 4 },
                { width: 100, targets: 5 },
                //{ width: 100, targets: 7 },
                { width: 100, targets: 6 }
            ]
        });

        $(document).on("change", "#filterleads", function(event) {
            table.ajax.reload();
        });

问题在于它找不到$("#filterleads")并始终发送所有&#39;全部&#39;即使我改变了选择

每次更改select时如何发送其值?

1 个答案:

答案 0 :(得分:1)

问题是因为您只在页面加载时读取了select的值,默认情况下它是all。您需要更改代码,以便在发出请求时读取select的值。为此,我们为data属性提供了一个函数:

"ajax": {
    url: "/leads",
    data: function(data) {
        data.leadfilter = $("#filterleads").val()
    }
},

请注意,我删除了三元,因为它不需要。 select将始终具有值。

有关详细信息,请参阅DataTables文档中的ajax.data条目。