使用jQuery在表中分页

Pagination within a table using jQuery

本文关键字：分页 jQuery 使用      更新时间：2023-09-26

在过去的几天里，我一直在编写以下代码，但找不到一个似乎能像我想要的那样工作的解决方案。我需要的是在表的一部分中进行某种分页。需要以下操作/事件：

  • 单击上一个或下一个时，顶部的比赛名称应随着高亮比赛而相应更改。SO R2=种族2-弗吉尼亚州等。

  • 棘手的部分来了，一旦你到达最后一个可见（高亮）列并单击下一个，就会出现一个新列，所以范围将是R2-R7，以此类推，总数总是不同的。所有Rn的宽度应保持不变。

我的问题是，这在jQuery中是否可能，以及如何实现？我研究了一些分页插件，但似乎没有一个能够做到这一点。

代码就在这里：http://jsfiddle.net/yunowork/5r9ZW/

不是完美的，但可能是一个起点：

我只在"下一个"中测试过它。

我在下一个函数中添加了edd：

var $currCol = $('.highlighted'); //to get the current column
$('.race strong').text($('.highlighted').next('td:first').text()); //To set the title: R1 - R2 - R3 ...

和

else{
        $currCol.each(function(i,v){
            var k = i + 1;   
            var id = parseInt(v.id.replace('r',''));                
            id++;
            if(k == 1) $(this).clone().text('R'+id).attr('id', 'r'+id).appendTo($('table tr').eq(k));
            else $(this).clone().attr('id', 'r'+id).appendTo($('table tr').eq(k));
        });
    } // to add a new column

希望这能帮助

使页面包含整个表。复制每页的所有表结构。

然后，当单击previous或next时，您需要一个事件处理程序（应该很容易），它只更新您所在的列，并更新名称（也很容易）。只需说：

$("#title").val(titlearray[columnnumber]); // or something like this

当您到达末尾时，以编程方式调用对页面所做的任何更改（这将加载一个新表）。

现在我不确定您从哪里获得数据——是否已经加载但没有显示，或者是否执行AJAX调用。如果有一个插件，你可能应该使用它。

不管怎样，如果它已经在页面上了，你可以在上一个/下一个事件处理程序中说这样的话（如果你没有使用插件）：

if (columnnumber == lastcolumn) {
  newpagenumber = oldpagenumber + 1; // for next page
  // do this if you don't have a pagination plugin
  $("#page" + oldpagenumber).css("display:none"); // hide previous page
  $("#page" + newpagenumber).css("display:block"); // show next page
  // otherwise use a plugin to switch pages
}

在你的html中，你可以有：

<table id="page1" style="display:block"></table>
<table id="page2" style="display:none"></table>
<table id="page3" style="display:none"></table>

这个想法只是让每个表都已经在HTML中，但您只需要显示代表正确页面的表。

相关文章：