Question

我有一个页面上有一个过滤器dropdown，并且该options中的dropdown是由我的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)（否），但是我认为我做错了什么。

基本上，我追求：

下拉options，以使用“第二个”列中显示的选项填充
当选项与过滤器匹配时过滤表格

我的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();

查看是否可以解决问题。请让我知道是否可以，我会再次检查。

Answer 2

我是“复制”和“粘贴”国王，我很高兴，我从第一列中删除了它，但没有从第二列中删除。停止它的代码是：

"searchable": false,
"sorting": false,
"orderable": false,

从第二列开始。

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

2 个答案: