Question

如果页面上不存在min和max字段，我将无法使用该功能

我正在使用此处找到的代码：https://datatables.net/examples/plug-ins/range_filtering.html

如果将其放在document.ready函数中并且页面已经具有用于最小和最大输入字段的HTML，则可以正常工作。但是，如果我动态加载min和max字段，那么它将无法正常工作。

我的代码如下：

style="background-image"

mem_list_table文件中的html是：

$("#memList").load("../../js/plugins/stats/mem_list_table.html", function(responseTxt, statusTxt, xhr){

                writeTableHeaders(); 
                writeTableFooters();

                var columns = tableDataColumns();

                var memTable =  $("#mem_list_table").DataTable ({
                    dom: 'rtlip',
                    columnDefs: [
                        { targets: 0, className: "details-control", defaultContent: '', width: 0},
                        { targets: [1,4,7], width: 30},
                        { targets: [2,3], width: 70},
                        { targets: [5], width: 200},
                        { targets: [6], width: 50},
                        { targets: "_all", className: "text-center" }
                    ],
                    destroy: true,
                    scrollY: "500px", // depth of datatable scroll - I'm ysing this to stop the datatable from expanding the panel
                    data: data,
                    bFilter: true, // remove search filter
                    order: [],
                    responsive: true,
                    autoWidth : false,
                    columns: columns,
                    searching: true,
                    paging: true,
                    info: true
                });




                // Apply the filter options
                memTable.columns().every( function (index) {

                    if (index===4) {
                        $(this.footer() ).html( '<input id="min" type="text" placeholder="Min" , class="text-center", style="width:80px" /> <input id="max" type="text" placeholder="Max" , class="text-center", style="width:80px; margin-top:10px"" />' ); 
                    } else if ( index > 0 ) {
                        $(this.footer() ).html( '<input type="text" placeholder="Search" , class="text-center ml-search", style="width:80px" />' );
                    }


                $("#memList").on('keyup', '#min', function () {
                    memTable.draw();
                });



                dfd.resolve("Plugin loaded in modal");
            });

            return dfd.promise();

        };

我很欣赏min和max字段尚未驻留在DOM中，并且在将字段写入DOM之后，我尝试将这段代码移至我的较早代码块，但仍然没有任何乐趣。所以我想我的问题是：如何在函数中引用这些字段以及应将函数放在何处？

将datatable $ .fn.dataTable.ext.search.push函数与动态html一起使用

0 个答案: