「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)
コメントする