jQuery Datatable,单个列过滤不起作用

时间:2018-09-20 08:15:53

标签: javascript jquery datatable

我将jQuery Datatables的最新文档示例用于单个列过滤器  https://datatables.net/examples/api/multi_filter

过滤器输入正确显示,但是当我搜索某些内容时,它显示“无可用数据”并且没有搜索。没有控制台错误。

请让我知道我可能会丢失的东西..

参考文献:

  <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" type="text/javascript"></script>


    <link href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />


    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 

JS:

$(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#BSAGrid tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });

            // DataTable
            var table = $('#BSAGrid').DataTable();

            // Apply the search
            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                });
            });
        });
   $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "/BSA/BSAExceptionGrid", 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    div.css("display", "none");

                  var BSATable =  $('#BSAGrid').DataTable({
                        paging: true,
                        searching: true,
                        destroy: true,
                        "bInfo" : true,
                        data: response,
                        columns: [
                            { "data": "Logged_ID" },
                            { "data": "Logged_ID" }, 
                            { "data": "CustomerName" },
                            { "data": "ClientType" }
                                 ], 
                        aoColumnDefs: [
                        {
                            aTargets: [0],    // Column number which needs to be modified
                            mRender: function (o, v) {   // o, v contains the object and value for the column
                                return '<input type="checkbox" id="chkBSA" name="chkBSA" />';
                            }
                            //,sClass: 'tableCell'       // Optional - class to be applied to this table cell
                        },

                         {
                             aTargets: [1],
                             visible: false
                         }
                        ],
                        select: {
                            style: 'os',
                            selector: 'td:first-child'
                        },
                        order: [[1, 'asc']]

                    }); 
                },
                failure: function (response) {
                    alert(response);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
 });

enter image description here

enter image description here

0 个答案:

没有答案