「jQuery UI」の「sortable」でドラッグによる並び替えを実装。件数に注意
- WEB
- 投稿者：WEB上手 ｜ 2018年6月13日
この記事を簡単に書くと…
- 「jQuery UI」を使えば、WEBサイトに簡単に様々な効果をつけられる
- 「sortable」を使うと、ドラッグによる並び替えを実装できる
- 400行を超えてくると、ページの表示が極端に遅くなってくる
PHPで管理画面を作成し、MySQLに格納してあるデータを一覧に書き出すページを作ることは良くあると思います。今回、何故か700件程度の書き出しで、ページの表示がとても遅くなってしまう現象に遭遇しました。
200件くらいまでは普通に表示されるのですが、400件になるとページが表示されるまでに少し時間がかかるようになり、600件くらいになると十数秒かかってしまいます。
これくらいの件数の表示で、こんなに時間がかかってしまうなんて。。。
色々と検証してみると、「jQuery UI」の「sortable」が原因でした。
「jQuery UI」の「sortable」でドラッグによる並び替え
「jQuery UI」は、ユーザーインターフェースの為のライブラリになります。「jQuery UI」を使えば、WEBサイトに様々な効果を与えたり、スライダーやアコーディオンパネルを作ったり、ドラッグ＆ドロップで要素を並び替えさせるようなことが、簡単にできるようになります。
今回は、管理画面上で表示されたデータを、ドラッグ＆ドロップで並び替えができるように「sortable」を使って実装していました。実装の方法はこちらの記事を参照してください。
・ドラッグ＆ドロップでli要素の並べ替え→DB書き換え
https://qiita.com/ao_love/items/4f74bdcd345e9e8ff810
件数が多くなるとページの表示に時間がかかる
「jQuery UI」の「sortable」を使うことで、直感的に並び替えをして、DBに保存をすることができます。ただ、200件くらいまでは全く問題はないのですが、ドラッグによる並び替え対象の行数が400行くらいを超えてくると、ページが表示されるまでに、やたらと時間がかかってしまうようになります。
おそらくパソコンの性能によって、時間は変わってくるのではないでしょうか。閲覧するブラウザによっても処理時間や現象は変わってきます。
これを回避するには、ページングなどの機能を実装して、一度に表示される件数を減らせば大丈夫ですね。100～200件程度でページングするようにすれば、ドラッグ＆ドロップでの並び替えと、並び替えのし易さを共存できそうです。
まとめ
ということで、「jQuery UI」の「sortable」でドラッグ＆ドロップの並べ替えを実装する時には、表示させる件数に注意しましょう。
・jQuery UI（公式サイト）
https://jqueryui.com/
関連記事
こちらの記事も読まれています
「ヒラギノ角ゴ」にソックリ！無料で使えるOpen Type フォント「...（3.3k view）
音量アイコンが反応しない場合の対処法（Windows 10）（3.2k view）
プリンターの状態が「要確認」と表示されて印刷できない場合の復旧方法（2.2k view）
iPhone等のスマホで<video>タグの動画が表示され...（825 view）
「光回線受付センター」はNTTではないので注意！光コラボとは？（765 view）
MW WP Formでメールが届かない・送信されない場合の対処法（677 view）
【詐欺メールに注意】お客様のAmazonプライム会員資格は、2019/...（671 view）
J:COM（ジェイコム）の無料メールアドレスの追加設定方法（640 view）
Windowsで「更新してシャットダウン」が消えない場合の対処法（612 view）
迷惑メール？「MAILER-DAEMON」から大量にメールが届く場合は...（521 view）
コメントする