Question

这里的问题是什么？我得到了我想要的搜索，但是在使用完全匹配的regex列时它不会重绘表格。我使用单个列来更好地过滤数字排名值。

<script>
jQuery(document).ready( function () {
    // Setup - add a text input to each header cell
    jQuery('#table1 thead tr#filterrow th').each( function () {
        var title = jQuery('#table1 thead th').eq( jQuery(this).index() ).text();
        jQuery(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />' );
    } ); 
    // Setup - add a text input to each footer cell
    jQuery('#table1 tfoot tr#filterrow th').each( function () {
        var title = jQuery('#table1 tfoot th').eq( jQuery(this).index() ).text();
        jQuery(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />' );
    } );
    // DataTable
var table = jQuery('#table1').DataTable( {
    orderCellsTop: true,
                aLengthMenu: [[-1, 10, 25, 50, 100, 200, 300, 400, 500],[ "All", 10, 25, 50, 100, 200, 300, 400, 500]],
                iDisplayLength: -1,
        dom: 'B<"lb">lfrtip',
                responsive: 'true',
        buttons: [
            { extend: 'copy',
                oSelectorOpts: {
                    filter: 'applied'
                }
            },
            { extend: 'csv',
                oSelectorOpts: {
                    filter: 'applied'
                }
            },
            { extend: 'pdfHtml5',
                oSelectorOpts: {
                    filter: 'applied'
                }
            },
            { extend: 'print',
                autoPrint: false,
                oSelectorOpts: {
                    filter: 'applied'
                }
            }
            ]
} );
    // Apply the filter
    jQuery("#table1 thead input").on( 'keyup change', function () {
        table
            .column( jQuery(this).parent().index()+':visible' )
            .search(this.value)
            .draw();
    } );
    jQuery("#table1 tfoot input").on( 'keyup change', function () {
        table
            .column( jQuery(this).parent().index()+':visible' )
            .search(this.value)
            .draw();
    } );
    jQuery("#table1 thead input").on( 'keyup change', function () {
        table
            .column(4)
            .search("^" + this.value + "$", true, false, true)
            .draw();
    } );
    jQuery("#table1 tfoot input").on( 'keyup change', function () {
        table
            .column(4)
            .search("^" + this.value + "$", true, false, true)
            .draw();
    } );
  function stopPropagation(evt) {
        if (evt.stopPropagation !== undefined) {
            evt.stopPropagation();
        } else {
            evt.cancelBubble = true;
        }
    }
} );
</script>

我觉得我的代码中应该有一些内容。

Answer 1

问题是stopPropagation()方法是在ready事件处理程序中定义的，并且在其外部不可见。

将定义stopPropagation()移到ready事件处理程序之外：

jQuery(document).ready( function () {
   // ... skipped ...  
});

function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

备注

由于您使用的是jQuery，因此可以使用更少的代码重写相同内容。 click事件处理程序可以放在ready事件处理程序中。

您为页脚和标题中的每个keyup change元素分配input两次。请考虑重写代码，如this example。

所示

控制台：ReferenceError：未定义stopPropagation

1 个答案: