无响应的单个列搜索(选择输入)

时间:2019-03-28 07:48:02

标签: javascript datatables

对于我的页面,我对dataTables插件进行了以下初始化:

    $(document).ready(function() {
    var method = getUrlVars()["method"];
    var sortFirst = getUrlVars()["sortFirst"];
    initCustomers('#{id:tblDataTables}', method, sortFirst);
});

function initCustomers(id, method, sort) {
    var max_rows = parseInt("#{javascript: application['rows_repeat']}");
    var btn_create_label = "#{javascript: datatable['gen_btnCreateAgenda']}";
    var btnExcel = "#{javascript: datatable['gen_btnExcel']}";
    var btnPrint = "#{javascript: datatable['gen_btnPrint']}";
    var lbl_ExcelFileName = "#{javascript: datatable['gen_MeetingUpcoming']}";

    var element = $(document.getElementById(id));
    var table = element.DataTable();       
    table.destroy();    
    localStorage.clear();
    element.DataTable({     
        "ajax": "api.xsp/customersAll?method=" + method,
        language: {
            url: getLanguage()
        },
        'processing': true,
        'language': {
            'loadingRecords': ' ',
            'processing': '<div class="spinner"><i class="fa fa-spinner fa-pulse"></i></div>'
        },
        "paging":true,
        "pageLength":max_rows,
        responsive: true,
        'order': [
            [1, 'asc']
        ],

        "columns": [
        {
            data: "cust",
            "render": function(data) {
                return "<a href='customer.xsp?unid=" + data.UNID + "&type=customer'>" + data.custId + "</a>"
                 return data.custId;
            }
        },{
            data: "cust.name",
            "render": function(data) {
                return data;
            }
        },{
            data: "cust.risk",
            "render": function(data) {
                return data;
            }            
        }, {
            data: "cust.office",
            "render": function(data) {
                return data;
            }           
        }, {
            data: "cust.resp",
            "render": function(data) {
                return data
            }
        }, {
            data: "cust",
            "render": function(data) {
                return data.SammandragsNr;
            }
        }],
        dom: 'Bfrtip',
        buttons: [{
                extend: 'excelHtml5',
                title: 'KKOM Kunder',
                text: '<i class="fa fa-file-excel-o"></i>&#160;' + btnExcel,
                titleAttr: 'Excel'
            },
            {
                extend: 'print',
                text: ' <i class = "fa fa-print " aria-hidden= "true "></i>&#160;' + btnPrint
            }
        ],
        colReorder: {
            reorderCallback: function() {
                console.log('callback');
            }
        },
        initComplete: function(data) {
            this.api().columns([2, 3, 4]).every(function() {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function(d, j) {
                    select.addClass('dataTableFilter');
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
            $('.dataTableFilter option').val(function(idx, val) {
                $(this).siblings('[value="'+ val +'"]').remove();
            });
        }

    });
    //$('tfoot').remove();
}

JSON数据如下:

{
    "data": [{
        "cust": {
            "reason": "",
            "systemID": "A0\u00A0",
            "mailFirst": "",
            "mailSecond": "",
            "resp": "",
            "privateOrCompany": "PRIVATE",
            "office": "52770",
            "extend": "",
            "mailLast": "",
            "UNID": "35EBC99851F3DF51C12583CA002FFD80",
            "SammandragsNr": "committee C & PC",
            "name": "BRITA BLOM",
            "custId": "23090502610009",
            "risk": ""
        }
    }, {
        "cust": {
            "reason": "",
            "systemID": "A0\u00A0",
            "mailFirst": "",
            "mailSecond": "",
            "resp": "",
            "privateOrCompany": "PRIVATE",
            "office": "52770",
            "extend": "",
            "mailLast": "",
            "UNID": "AA23069A275A49FCC12583CA002FFD89",
            "SammandragsNr": "committee H & R",
            "name": "JENS ANDERS",
            "custId": "25090502610009",
            "risk": ""
        }
    }]
}

对于columns([2,3,4])我得到选择输入。但是,如果我在选择项中选择一个选项,则该表将完全无响应。

有人知道如何使列搜索正常工作吗?

0 个答案:

没有答案