Question

不知道发生了什么，但我想使用3个外部过滤器来过滤Datatable，但我根本无法使它们正常工作，也无法弄清为什么或我做错了什么

Index.html

<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

HTML

<div class="card">
    <div class="card-header">
        Filter results
    </div>
    <div class="card-body">
        <p class="card-text">Use the filters to filter the results.</p>
        <form>
            <div class="row">
                <div class="col-4">
                    <div class="form-group" data-column="2">
                        <label for="companyNameField">Company name</label>
                        <input id="companyNameField" type="text" class="form-control" placeholder="Company name">
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group" data-column="1">
                        <label for="typeDropdown">Type</label>
                        <select id="typeDropdown" class="form-control">
                            <option id="typeAll">All</option>
                            <option id="typeChan">Channel</option>
                            <option id="typeCust">Customer</option>
                            <option id="typeResell">Reseller</option>
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group" data-column="8">
                        <label for="accStatusDropdown">Account status</label>
                        <select id="accStatusDropdown" class="form-control">
                            <option id="accStatAll">All</option>
                            <option id="accStatActive">Active</option>
                            <option id="accStatClosed">Closed</option>
                            <option id="accStatSus">Suspended</option>
                            <option id="accStatFraud">Suspended (Fraud)</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <table id="accoutSearchDataTable" class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Name</th>
                    <th>Contact name</th>
                    <th>Tel no.</th>
                    <th>Mobile no.</th>
                    <th>Email address</th>
                    <th>Prefix</th>
                    <th>Account status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

JS文件

$('#accoutSearchDataTable').DataTable({
    "ordering": true, // Allows ordering
    "paging": true, // Pagination
    "searching": false, // Searchbox
    "info": false, // Shows 'Showing X of X' information
    "pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
    "pageLength": 10, // Defaults number of rows to display in table. If changing this value change the show/hide below
    "sDom": '<"wrapper"lfptip>',
    "lengthMenu": [
        [10, 25, 50, -1],
        [10, 25, 50, "All"]
    ],
    "fnDrawCallback": function () {
        $('select[name=accoutSearchDataTable_length]').addClass('form-group, form-control');

        // Shows/Hides dropdown and paginator depending on number of results returned
        if (accoutSearchDataTableCount < 10) {
            $('#accoutSearchDataTable_paginate, #accoutSearchDataTable_length').hide();
        } else {
            $('#accoutSearchDataTable_paginate, #accoutSearchDataTable_length').show();
        }

        if (accoutSearchDataTableCount > 1) {
            $('#noResultsWording').hide();
        }

        // Shows/Hides paginator if only one page displayed
        if ($('#accoutSearchDataTable_next').hasClass('disabled') && $('#accoutSearchDataTable_previous').hasClass('disabled')) {
            $('#accoutSearchDataTable_paginate').hide();
        } else {
            $('#accoutSearchDataTable_paginate').show();
        }
    },
    "language": {
        "lengthMenu":
        "<span class='mb-2' style='display: flex'>" +
        "<span class='mr-2 d-flex align-items-center'>Displaying</span>" +
        "_MENU_" +
        "<span class='ml-2 d-flex align-items-center'>records</span>" +
        "</span>"
    },
    'ajax': {
        "type": 'GET',
        "url": 'js/testFiles/accountSearch.json',
        "data": function (data) {
            return data;
        },
        "dataSrc": function (res) {
            accoutSearchDataTableCount = res.data.length;
            return res.data;
        },
        "error": function () {
            $('#accoutSearchDataTable_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": "id"
        },
        {
            "data": "type"
        },
        {
            "data": "company"
        },
        {
            "data": "contactname"
        },
        {
            "data": "telno"
        },
        {
            "data": "mobileno"
        },
        {
            "data": "emailaddress"
        },
        {
            "data": "prefix"
        },
        {
            "data": "accountstatus"
        },
        {
            "searchable": false, // Stops search in the fields
            "sorting": false, // Stops sorting
            "orderable": false, // Stops ordering
            "data": null,
            "render": function (data) {
                return '<div class="d-flex align-items-center justify-content-center alert alert-info m-0 roundButton">' +
                '<i class="fas fa-eye"></i>' +
                '</div>'
            }
        },
    ],
    "destroy": true
});

$('#typeDropdown').on('change', function () {
    var typeVal = this.value;
    alert(typeVal)

    if (typeVal != '') {
        alert('typeDropdown IF')
        $('#accoutSearchDataTable').DataTable().columns(1).search(typeVal).draw();
    } else {
        alert('typeDropdown ELSE')
    }
});

$('#accStatusDropdown').on('change', function () {
    var statusVal = this.value;
    alert(statusVal)

    if (statusVal != '') {
        alert('accStatusDropdown IF')
        $('#accoutSearchDataTable').DataTable().columns(8).search(statusVal).draw();
    } else {
        alert('accStatusDropdown ELSE')
    }
});

$('#companyNameField').on('keyup', function () {
    var nameVal = this.value;
    alert(nameVal)

    if (nameVal != '') {
        alert('companyNameField IF')
        $('#accoutSearchDataTable').DataTable().columns(3).search(nameVal).draw();
    } else {
        alert('companyNameField ELSE')
    }
});

我所有的警报都在工作，但是表格没有过滤。

dropdowns中的过滤器为：

类型：经销商，渠道，客户

状态：有效，已关闭，已暂停

Answer 1

更改此：

"searching": false, // Searchbox

对此：

"searching": true, // Searchbox

来自数据表文档：

请注意，从技术上讲，DataTables中的搜索实际上是一个过滤器，因为它是减法运算，因此随着输入变得更加复杂，将从数据集中删除数据。在此处以及在DataTables API中的其他地方，它被称为“搜索”，以确保一致性并确保与其他类似名称的方法（特定于filter（）API方法）没有冲突。请注意，如果您希望使用DataTables的搜索功能，则必须保持true-在保留搜索功能的同时删除默认搜索输入框（例如，您可以使用search（）方法）

Answer 2

创建数据表实例，然后尝试重新加载它。

var dataTable=$('#accoutSearchDataTable').DataTable({....

访问过滤器

$('#typeDropdown').on('change', function() {
    var typeVal = this.value;

    if (typeVal != '') {
        dataTable.column(1).search(typeVal).draw();
    } else {
        alert('typeDropdown ELSE');
    }
});

$('#accStatusDropdown').on('change', function() {
    var statusVal = this.value;

    if (statusVal != '') {
        dataTable.column(8).search(statusVal).draw();
    } else {
        alert('accStatusDropdown ELSE');
    }
});

$('#companyNameField').on('keyup', function() {
    var nameVal = this.value;

    if (nameVal != '') {
        dataTable.column(3).search(nameVal).draw();
    } else {
        alert('companyNameField ELSE');
    }
});

和"searching": true,

https://jsfiddle.net/12uk68y9/

应用外部过滤器时，数据表未绘制

2 个答案: