そのまま即座にデータベースUPDATE保存する!【JQuery・Ajax・Javascript・PHP・Mysql】データベースのデータをWEB上に<TABLE>表示し、WEB上でソート順を変更したいしかもソート順をそのままajaxで非同期にデータベース(MySQL等DB)更新・登録保存したいっていうよくある件。※実際にデータベース保存までをテストいただけます。「数字でソート順を指定」しデータベース更新する方法は導入は簡単ですが、ユーザー的には使いづらいものになるかと思います。直感的に「ドラッグ&ドロップ」で並び替え指定できる方が、使いやすいのは間違いないです。使ったなど、やり方はいろいろとありますので、別のものでも結構です。並べ替え後に更に、データベースへ「ソート順」登録する方法をメインにご紹介します。並び替えしたいデータが1ページ内に全て表示されていることです。ページをまたいでの「ドラッグ&ドロップ」並び替えはできないので、ページングで数ページにわたって表示するようなビッグデータには、この方法は向きません。「ドラッグ&ドロップ」した途端にデータベースにそのまま「ソート順」が保存されますので、さくさくと並べ替え指定ができます。※Ajaxの非同期通信を使用します。(ドラッグ&ドロップ並び替えするTABLE表示ファイル)JQuery本体設置まずは、JQuery本体を設置します。バージョン1.7以上で動くと思います。次に、「TableDnD」プラグインを読み込みます。CDN経由で読み込んでも、サーバーにダウンロード設置して読み込んでも、どちらでもOkです。(ダウンロードする場合は、「TableDnD」プラグイン本家URLで公開されているようですが、リンク切れなどで見つかりにくかったので、こちらにシェアしています。・下記コードの4行目「#table-1」のところは、任意ID名に好きに置き換えてください。(次項4TABLEのコード例参照)・8行目の’inc/sort.php’は、sort.phpファイルの設置PATHに変更してください。ちなみに、8行目~10行目は、データベース保存を実行するPHPファイルに、並べ替え後のデータをPOSTで渡しています。});});</script><TABLE>のコード※データベースからのデータ取り出し方法は割愛します。任意ID名を付けてください。nodrag”を指定しています。nodrag”を指定でその行をドラッグできないようにできます。実際のデータベーステーブルの、各データの主ID(数字)となります。データベースへの接続を行っているものとします。MySQLデータベース接続や、SQL文実行・切断部分は、適宜ご自身の環境に変えて記述してください。このsort.phpを公開ディレクトリに置く場合で、セキュリティ上sort.phpに直接アクセスされないようにするには、次項htaccess等で外部からのアクセス拒否を設定してください。データベースへの接続をしてください。(適宜、ご自身の環境に変えて記述してください。ajax送信されます。該当テーブルのテーブル名・カラム名に変更してください。--------------------------------------mysql_close($link);.htaccessファイル※必要な場合に設置してください。実行ファイル(sort.php)を置くディレクトリに.htaccessを設置し、外部からの直接アクセスを禁止します。(自ドメインからのアクセスのみに限定し、それ以外の直接アクセスを拒否します。ご自身のサイトのドメイン名に書き換えてください。※ただし、下記のRefererも、偽装など可能なためアクセスを100%禁止はできません。#自身のドメイン名に書き換えてください。#自身のドメイン名に書き換えてください。env=Ref2以上です。どなたかのお役になれば幸いです。※コメントへの返信は基本的に行っておりません。あしからずご了承ください。いただいたご意見・ご質問等は、公開が有益な場合公開させていただき記事内で返答させていただきます。※場合によりご連絡をさせていただく際のご了承をいただける方は「了承」にチェックをお願いします。