2

过去几天我一直在研究以下代码,但找不到似乎可以按我想要的方式工作的解决方案。我需要的是在表格的一部分内进行分页。需要以下操作/事件:

  • 单击上一个或下一个时,顶部的比赛名称应随着突出显示的比赛而相应更改。SO R2 = Race 2 - Virgina 等。

  • 棘手的部分来了,一旦您到达最后一个可见(高亮)列并单击下一步,应该会出现一个新列,因此范围将为 R2-R7 等等,总数总是不同的。所有 Rn 的宽度应该保持不变。

我的问题是,这在 jQuery 中甚至是可能的吗?如何?我研究了一些分页插件,但似乎没有一个能够做到这一点。

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

4

2 回答 2

0

使页面涉及整个表格。复制每个页面的所有表结构。

然后,当单击previousor时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 中,但您只是显示代表正确页面的表格。

于 2012-09-07T11:56:20.617 回答
0

并不完美,但可能是一个起点:

我只在“下一个”中对其进行了测试。

我在下一个函数中添加了:

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

希望这有帮助

于 2012-09-07T12:32:16.230 回答