问带有jQuery tableSorter插件的过滤项的选择器
EN

Stack Overflow用户

提问于 2014-09-24 15:36:16

回答 1查看 429关注 0票数 0

这件事最近出现在我的脑海里，老实说，我认为这值得一问。事情是这样的..。

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

所以我想做的是..。我想要过滤表格中的元素，然后点击标题上的复选框，并且我想要影响用插件过滤的行的复选框。

有人想说点什么吗？谢谢。

tablesorter

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-24 20:27:23

我已经为那个这里设置了一个演示程序

$( 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' }
        }
    });
});