使用jQuery tableSorter插件筛选项目的选择器

Selector for filtered items with jQuery tableSorter plugin

本文关键字：项目 选择器 筛选 插件 jQuery tableSorter 使用      更新时间：2023-09-26

这件事最近进入了我的脑海，老实说，我认为值得一问。这是。。

我有一个表，就像任何其他带有jquery表分类器插件和过滤器小部件的普通表一样。在表格列的最右边，我放了一个复选框，在该列的上方，在该栏的表格标题上，我有另一个复选复选框，它有一个链接到它的函数，所以当它被点击时，所有复选框都会用这个复选框的值更新。这不是很花哨或复杂，我有两种方法可以做到这一点。。要么使用jquery选择器，要么使用普通的旧javascript。

这就是我想要做的。。我想过滤表的元素，然后单击标题上的复选框，我想影响用插件过滤的行的复选框。

有人对此有什么要说的吗？谢谢

我已经在这里为设置了一个演示

$( function() {
    // using .on() which requires jQuery 1.7+
    $( 'table' ).on( 'tablesorter-initialized', function() {
        // class name to add on tr when checkbox is checked
        var highlightClass = 'checked',
        // resort the table after the checkbox is modified?
        resort = true,
        // if a server side database needs to be updated, do it here
        serverCallback = function( table, inputElement ) {},
        $table = $( this ),
        c = this.config,
        wo = c && c.widgetOptions,
        // include sticky header checkbox; if installed
        $sticky = c && wo.$sticky || '',
        doChecky = function( c, col ) {
            $table
                .children( 'tbody' )
                .children( 'tr:visible' )
                .children( 'td:nth-child( ' + ( parseInt( col, 10 ) + 1 ) + ' )' )
                .find( 'input[type=checkbox]' )
                .each( function() {
                    this.checked = c;
                    $( this ).trigger( 'change' );
                });
        };
        $table
            .children( 'tbody' )
            .on( 'change', 'input[type=checkbox]', function() {
                // ignore change if updating all rows
                if ( $table[0].ignoreChange ) { return; }
                var col, $this = $( this );
                $this.closest( 'tr' ).toggleClass( highlightClass, this.checked );
                $this.trigger( 'updateCell', [ $this.closest( 'td' ), resort ] );
                // if your server side database needs more parameters, add them here sent to the callback
                serverCallback( $table[0], this );
                // uncheck header if any checkboxes are unchecked
                if ( !this.checked ) {
                    $table.add( $sticky ).find( 'thead input[type=checkbox]' ).prop( 'checked', false );
                }
            })
            .end()
            .add( $sticky )
            .find( 'thead input[type=checkbox]' )
            // Click on checkbox in table header to toggle all inputs
            .on( 'change', function() {
                // prevent updateCell for every cell
                $table[0].ignoreChange = true;
                var c = this.checked,
                    col = $( this ).closest( 'th' ).attr( 'data-column' );
                doChecky( c, col );
                // update main & sticky header
                $table.add( $sticky ).find( 'th[data-column=' + col + '] input[type=checkbox]' ).prop( 'checked', c );
                $table.children( 'tbody' ).children( 'tr:visible' ).toggleClass( highlightClass, c );
                // update all at once
                $table[0].ignoreChange = false;
                $table.trigger( 'update', [ resort ] );
            })
            .on( 'mouseup', function() {
                return false;
            });
    });
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'stickyHeaders','filter'],
        headers: {
            0: { sorter: 'checkbox' }
        }
    });
});

只需确保包含parser-input-select.js文件

相关文章：