Question

我有一个表，并实现了一些分页。分页工作得很好！

我还添加了一个文本字段，以便用户可以搜索列。这是使用的逻辑

$( "input#filter" ).keyup( function() {
    var filtertext = $( this ).val();
    $( "#movie tbody tr" ).each( function( rowindex ) {
        $( this ).children( "td" ).eq( 2 ).each( function( cellindex ) {
            if ( $( this ).text().indexOf( filtertext ) < 0 ) {
                $( this ).parents( "tr" ).hide();
            } else {
                $( this ).parents( "tr" ).show();
            }
        });
    });
})

但是，只要用户键入文本框中的第一个字符，分页就会进行折腾，所有行都会再次显示。我该如何修复这个错误？

这是小提琴http://jsfiddle.net/Pja65/

P.S：我没有使用任何插件，因为我有一个简单的要求，并且不想使用任何插件

Answer 1

小提琴：http://jsfiddle.net/Pja65/1/
你有超过2-3个错误 1. $( this ).children( "td" ).eq( 2 )应为$( this ).children( "td" ).eq( 1 )。这是第三栏 2.您需要检查搜索词是否为空，如果是，则显示所有行，方法是调用paginate(firstRecord, pageSize);。

$( "input#filter" ).keyup( function() {
var filtertext = $( this ).val();
if(filtertext != '')
    $( "#movie tbody tr" ).each( function( rowindex ) {
        $( this ).children( "td" ).eq( 1 )
            .each( function( cellindex ) {
                if ( $( this ).text().indexOf( filtertext ) < 0 ) {
                    $( this ).parents( "tr" ).hide();
                } else {
                    $( this ).parents( "tr" ).show();
                }
            });
    });
else
    paginate(firstRecord, pageSize);
})

在表中搜索会删除分页

1 个答案: