JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介

「jQuery UI」の「sortable」でドラッグによる並び替えを実装。件数に注意

この記事を簡単に書くと…

  • 「jQuery UI」を使えば、WEBサイトに簡単に様々な効果をつけられる
  • 「sortable」を使うと、ドラッグによる並び替えを実装できる
  • 400行を超えてくると、ページの表示が極端に遅くなってくる
ブログランキング・にほんブログ村へ

「jQuery UI」の「sortable」でドラッグによる並び替えを実装。件数に注意

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/

この記事をSNSでシェアする

関連記事

こちらの記事も読まれています

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

カテゴリー

このサイトについて

JavaScript・PHP・Vue.jsのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com