web-dev-qa-db-ja.com

モバイルビューでのページネーションブロックの最良の治療は何ですか？

私はレスポンシブWebデザインプロジェクトに取り組んでいます。数百のレコードに達する可能性のあるこのテーブルがあるため、その下にページ分割ブロックを使用しています。最初のロード時に、ユーザーはドロップダウンに10、25、または50レコードを表示することを選択できます。ブレークポイントは600pxです。例として25レコードを考えてみましょう：

デスクトップビューでは、最初の25レコードが表示されます。ユーザーがページ分割の2ページ目をクリックすると、次の25ページが表示されます。テーブルのレコード数は常に25です。

モバイルビューでは、テーブルがアコーディオンに折りたたまれます。ページごとのレコードのドロップダウンは非表示です。ページネーションブロックは非表示です。代わりに、ボタン「Show Next 25」がアコーディオンの下に表示されます。クリックすると、次の25件のレコードが表示されます。全部で50個になりました。

問題は、一部のデバイスの幅がブレークポイントよりも大きい場合に発生します。 （例：幅640ピクセルのHTC One）。これらのデバイスでは、ユーザーが最初にアコーディオンをポートレートモードでロードしてから、[次の25を表示]ボタンをクリックし、電話をランドスケープモードに回転させます（ページネーションとページごとのレコードドロップダウンがあり、ボタンはありません）。ユーザーは見る必要がありますか？

いくつかのオプションがあります：

  1. モバイルビューで、「次の25を表示」ボタンをクリックすると、25を追加するのではなく、次の25を表示するだけです。したがって、ユーザーが回転して横（デスクトップ）ビューに戻ると、ページ付けの2ページ目になります。 Drawback：ユーザーはモバイルビューで最初の25レコードに戻ることができません。

  2. 常に「次を表示25」ボタンのみを表示し、ページ付けを削除します。そのため、ユーザーがデスクトップブラウザで表示した場合でも「次の25を表示」が表示されますDrawback：「次の25を表示」ボタンがワイド画面で奇妙に見えます。

  3. モバイルビューで、[次の25を表示]ボタンのみを表示する代わりに、[前の25を表示]ボタンを追加します。したがって、モバイルビューでそれをミニページネーションにします。ボタンをクリックすると、次/前の25が読み込まれます。ページのレコード数は25のままです。Drawback：引き続きページ付けですが、長さは短くなっています。

どのアプローチを採用するか、またはオプション4があるかどうかはよくわかりません。ご意見をお寄せいただきありがとうございます。

ありがとう。

tablesresponsive-designpagination
5
Yunzhou

まず、バックナビゲーションを提供しないと、ユーザーコントロールが制限されます。だからそれを使う方が良いです。

第二に、あなたのラベルはあまりにも詳細です。 Show Next 25 だけに短縮することができます Next > あるいは >。戻るボタンも同様です。 25や50を実際に数える人はいません。また、ページ付けパターンからShowアクションが理解されます。

Googleは次の方法でこれを行います。
enter image description here

4
Alexey Kolchenko

私の頭の上から、私は＃3で行きます。 ＃1は最悪の解決策のように思われます。それは、情報を取得する明確な方法がないため、ユーザーから情報を予期せず隠す可能性があるためです-非常に問題があります。

ソリューション＃2は問題ないように聞こえますが、ボタンが「奇妙に見える」とはどういう意味かわかりません-解決できるように聞こえるかもしれません。

アコーディオンと一緒にページネーションを使用することは、＃3では少し多いかもしれませんが、どちらもかなり通常のUI要素なので、混乱が多すぎるとは思えません。私があなたを正しく理解している場合、ソリューション＃3もページ上のレコード数を25に制限する唯一のソリューションです。各レコードの長さはわかりませんが、スクロールしすぎないようにしたいので、これはおそらく利点。

0
angelapotter

行を正しいページ番号<tr data-page='1'>でマークします。デスクトップビューの場合、CSSを使用して現在のページにない他の行を非表示にします。

詳細

デスクトップビューでは、現在のリクエストのすべての行を常に現在のページ番号<tr data-page='1'>で装飾します。たとえば、ページごとに2つのレコードがあり、ページ3にいるとします。

...
<tr data-page='1' style="display: none;"></tr>
<tr data-page='1' style="display: none;"></tr>
<tr data-page='2' style="display: none;"></tr>
<tr data-page='2' style="display: none;"></tr>
<tr data-page='3' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
...

モバイルビューに切り替えると、

...
<tr data-page='1' style="display: block;"></tr>
<tr data-page='1' style="display: block;"></tr>
<tr data-page='2' style="display: block;"></tr>
<tr data-page='2' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
...

このパターンは、データを2回ロードしないことも保証します。

0
Tebo