2

私は過去数日間次のコードに取り組んでいますが、私が望むように機能しているように見える解決策を見つけることができません。私が必要とするのは、テーブルの一部内の一種のページ付けです。次のアクション/イベントが必要です。

  • 前または次をクリックすると、上部のレースの名前がハイライトされたレースに応じて変更されます。SOR2=レース2-バージナなど。

  • ここで注意が必要な部分があります。最後に表示された（強調表示された）列に到達し、[次へ]をクリックすると、新しい列が表示されるため、範囲はR2〜R7などになり、総数は常に異なります。すべてのRnの幅は同じままである必要があります。

私の質問は、これはjQueryでも可能ですか？私はいくつかのページネーションプラグインを研究しましたが、どれもこれを行うことができないようです。

コードはここにあります：http：//jsfiddle.net/yunowork/5r9ZW/

4

2 に答える 2

0

ページにテーブル全体を含めるようにします。各ページのすべてのテーブル構造を複製します。

次に、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に含めることですが、正しいページを表すテーブルを表示するだけです。

于 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 に答える