javascript - 外部下拉列表不过滤数据表

Question

我有一个页面，它有一个过滤器 dropdown 并且这个 dropdown 中的 options 是从我的 JQuery Datatable< 填充的

我遇到的问题是，当我从 dropdown 中选择一个值时，没有呈现任何内容。

我是 Datatables 的新手，我需要 dropdown 是外部的，而不是使用 DT。

HTML

<div class="row">
    <div class="col-xs-12 col-md-10">
        <select id="select" class="form-control">
            <option id="default">Please select</option>
        </select>
        <table id="manageDialPlanMainDataTable" class="table table-hover">
            <thead>
                <tr>
                    <th style="width: 100px">Number</th>
                    <th>Number type</th>
                    <th style="width: 100px"></th>
                    <th style="width: 100px"></th>
                    <th style="width: 100px"></th>
                    <th style="width: 130px"></th>
                    <th style="width: 200px"></th>
                    <th style="width: 200px"></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

jQuery

var manageDialPlanMainDataTable = $('#manageDialPlanMainDataTable').DataTable({
    "ordering": true,
    "paging": true,
    "searching": true,
    "info": false,
    "pagingType": 'simple_numbers',
    "pageLength": 10,
    "dom": '<"top"f>rt<"bottom"lp><"clear">',
    "lengthMenu": [
        [10, 25, 50, -1],
        [10, 25, 50, "All"]
    ],
    "ajax": {
        "type": 'GET',
        "url": '../_IncomingCallCode/jsons/manageDpMainTable.json',
        "data": function (data) {
            return data;
        },
        "error": function () {
            $('#manageDialPlanMainDataTable_wrapper').hide();
            $('#existingRuleLoadErrorMessage').html(
                '<p>There was an issue retrieving data. Please try again.</p>' +
                '<p>If the error keeps occurring, please get in touch.</p>').addClass('text-danger');
        }
    },
    "columns": [
        {
            "data": null,
            "render": function (data) {
                telNumberSelected = data.telnum;
                strippedTelNo = telNumberSelected.split('-')[0];

                if ($.isNumeric(strippedTelNo)) {
                    strippedTelNo = '0' + strippedTelNo;

                    return strippedTelNo;
                } else {
                    return strippedTelNo;
                }
            }
        },
        {
            "searchable": false,
            "sorting": false,
            "orderable": false,
            "data": null,
            "render": function (data) {
                telNumberSelected = data.telnum;

                if (telNumberSelected.includes('-')) {
                    var telNumberSelectedType = telNumberSelected.split('-')[1];
                    var option;

                    if (telNumberSelectedType == 'oo') {
                        telNumberSelectedType = 'Out of hours';

                        option = "<option>" + telNumberSelectedType + "</option>"
                        $('#select').append(option);

                        return telNumberSelectedType
                    } else if (telNumberSelectedType == 'w') {
                        telNumberSelectedType = 'Working hours';

                        option = "<option>" + telNumberSelectedType + "</option>"
                        $('#select').append(option);

                        return telNumberSelectedType
                    } else {
                        var telNumberSelectedTypeOriginal = telNumberSelectedType;

                        // Add space between capitals if value doesn't have one
                        telNumberSelectedType = telNumberSelectedType.replace(/([A-Z])/g, ' $1').trim();
                        // Lowercases second word
                        telNumberSelectedType = telNumberSelectedType.charAt(0).toUpperCase() + telNumberSelectedType.substr(1).toLowerCase();

                        option = "<option>" + telNumberSelectedType + "</option>"
                        $('#select').append(option);

                        return telNumberSelectedType
                    }
                } else {
                    telNumberSelectedType = 'N/A';

                    option = "<option>" + telNumberSelectedType + "</option>"
                    $('#select').append(option);

                    return telNumberSelectedType
                }
            },
            "createdCell": function (td) {
                // Populates each Num Type' TD with a 'Name'
                if (telNumberSelected.includes('-')) {
                    var telNoSelectedType = telNumberSelected.split("-").pop();
                    var telNoSelectedType = '-' + telNoSelectedType;

                    $(td).attr('name', telNoSelectedType);
                } else {
                    telNoSelectedType= 'N/A';

                    $(td).attr('name', telNoSelectedType);
                }
            }
        }
    ],
    "initComplete": function () {
        var selectedNumType = {};

        // Removes duplicate values
        $('#select > option').each(function () {
            if (selectedNumType[this.value]) {
                $(this).remove();
            } else {
                selectedNumType[this.value] = this.text;
            }
        });
    }
});

// Function call when Filter dropdown changed
$('#select').on('change', function () {
    var abc = this.value;
    var def = telNumberSelectedType;
    var aaa = $("#select option:selected").text();

    console.log('abc: ' + abc);
    console.log('def: ' + def);
    console.log('aaa: ' + aaa);

    if (abc != 'Please select') {
        manageDialPlanMainDataTable.columns(1).search(abc).draw();
    } else {
        alert('ELSE');
        manageDialPlanMainDataTable.columns(1).search('').draw();
    }
});

console.log 的 DevTools 屏幕截图

渲染表的截图

我尝试过更改 columns(1) 编号，也尝试过 column(1)(没有 's')，但我认为我必须完全做某事错了。

基本上我在追求:

• 下拉 options 将填充“第二”列中显示的选项
• Filter the table when option matches the filter

虽然我的 else 工作正常，但如果我重新选择“请选择”，它会重新绘制整个表格。

Answer 1

在接下来的位上

// Function call when Filter dropdown changed
$('#select').on('change', function () {
    var abc = this.value;
    var def = telNumberSelectedType;
    var aaa = $("#select option:selected").text();

    console.log('abc: ' + abc);
    console.log('def: ' + def);
    console.log('aaa: ' + aaa);

    if (abc != 'Please select') {
        manageDialPlanMainDataTable.columns(1).search(abc).draw();
    } else {
        alert('ELSE');
        manageDialPlanMainDataTable.columns(1).search('').draw();
    }
});

尝试改变

manageDialPlanMainDataTable.columns(1).search(abc).draw();

到

manageDialPlanMainDataTable.columns(1).search(aaa).draw();

看看是否能解决问题。如果没有，请告诉我，我会再次检查。