Question

我有以下代码，我正在尝试使用Pagenext和之前的表行

$( "a.paginate" ).click( function( e ) {
e.preventDefault();
if ( $( this ).attr( "id" ) == "next" ) {
//what to write here? 
// firstrecord should be between 0 and max rows
// somehow page size has to be added to the firstrecord
} else {
//what to write here?
// pagesize has to be subtracted, but unable to figure how to
}
paginate( firstRecord, pageSize );
});

http://jsfiddle.net/99xAU/1/

任何人都可以帮我分类如何使代码工作

Answer 1

因此，您可以使用以下命令计算当前描述的行数：

var tablerows = $("#movie tr).length;

这将工作一次。然后问题是你不知道第一条记录应该是什么。我建议为每个表行添加一个ID。对于“下一个”分页，我会这样：

var firstRecord = $("#movie tr:last").prop("id");

最后一次分页我会这样：

var firstRecord = $("#movie tr").eq(1) - pageSize //whatever page size is it should always be smaller than the Id.

当然，这假设ID始终是连续的，这在很大程度上取决于您如何使用数据来填充表格。例如，如果我们假设你是从JSON源填充表的那个你正在缓存没有已分配ID的客户端，那么你可以在填充表时分配ID。否则我建议使用数据库上的跳过和限制函数来处理分页服务器端

Answer 2

解决方案是使用eq(...)函数或:eq(...)选择器。

您的功能变为：

/*
 *    Paginate function
 *
 * */
var paginate = function( start, size ) {

    // first page    
    if (start - size < 0) {

        // hide "Previous" link
        $("#previous").hide();

    // not the first page
    } else {

        // show it
        $("#previous").show();
    }

    // last page
    if (start + size >= $tableRows.length) {
        // hide the "Next" link
        $("#next").hide();
    // not the last page
    } else {
        // show it
        $("#next").show();
    }

    // hide all table rows
    $tableRows.hide();

    // each row from `start` to `start + size`
    for (var i = start; i < start + size; ++i) {

        // if index is greater than table row length
        if (i > $tableRows.length) {

            // we are on the last page
            $("#next").hide();

            // return
            return;
        }

        // show the current row
        $tableRows.eq(i).show();
    }
};

在点击处理程序中，只需递增或递减firstRecord变量。

if ($( this ).attr( "id" ) == "next" ) {
    firstRecord += pageSize;
} else {
    firstRecord -= pageSize
}

然后调用paginate(firstRecord, pageSize)函数：

paginate( firstRecord, pageSize );

JSFIDDLE

Answer 3

您可以使用slice：

描述：将匹配元素集减少到指定的子集通过一系列指数。

定义要在当前页面中显示的元素。

代码：

var firstRecord = 0;
var pageSize = 4;
var tableRows = $("#movie tbody tr");

$("a.paginate").click(function (e) {
    e.preventDefault();
    var tmpRec = firstRecord;
    if ($(this).attr("id") == "next") {
        tmpRec += pageSize;
    } else {
        tmpRec -= pageSize;
    }
    if (tmpRec < 0 || tmpRec > tableRows.length) return
    firstRecord = tmpRec;
    paginate(firstRecord, pageSize);
});

var paginate = function (start, size) {
    var end = start + size;
    tableRows.hide();
    tableRows.slice(start, end).show();
}


paginate(firstRecord, pageSize);

演示：http://jsfiddle.net/H9JBT/

更新

对于hide / show next / prev按钮，您可以使用:visible和is检查可见的第一个/最后一个元素。

代码：

var paginate = function (start, size) {
    var end = start + size;
    tableRows.hide();
    tableRows.slice(start, end).show();
        $(".paginate").show();
    if (tableRows.eq(0).is(":visible")) $('#previous').hide();
        if (tableRows.eq(tableRows.length-1).is(":visible")) $('#next').hide();
}

演示：http://jsfiddle.net/IrvinDominin/LPwVB/

计算用于分组和分页的行

3 个答案:

更新