開発初心者の質問で分かりにくい点が多々あるかと存じますが、ご了承くださいませ。 DBからPHPにて受信したデータをテーブルに表示し、そのデータをjQueryを使用して、 テーブルをソートできるように、実装したいのですが、下記のコードではソート機能が 実装されません。 PHP,jQueryにお詳しい方、お手数では御座いますが、ご教授頂きたく存じます。 宜しくお願い致します。 ■ソースコード(index.php) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> </head> <body> <!-- DBのデータをPHPで処理 --> <?php // PostgreSQLに接続 $conn = pg_connect('host=localhost dbname=test user=jiptsinfra016 password=Infra0610'); if( $conn ) { var_dump("接続に成功しました"); } else { var_dump("接続できませんでした"); } // SQL文を実行 $result = pg_query('SELECT * FROM test_json'); // 全てのデータを配列で取得 $data = pg_fetch_all($result); // ひとつずつ取得 //$data = pg_fetch_result($result, 0, 0); //html上に取得したデータを表示 //var_dump($data); print "<table id=\"dblist\" summary=\"PostgreSQLのデータベースの一覧\">\n"; print "<caption>データベース一覧</caption>\n"; //テーブルヘッダとしてフィールド(カラム)名を出力 print "<tr>\n"; $flds = pg_num_fields($result); for($i=0; $i<$flds; $i++){ $field = pg_field_name($result, $i); printf("<th abbr=\"%s\">%s</th>\n", $field, $field); } print "</tr>\n"; //データの出力 foreach($data as $rows){ print "<tr>\n"; foreach($rows as $value){ printf("<td>%s</td>\n", $value); } print "</tr>\n"; } print "</table>\n"; // PostgreSQLを切断 $close = pg_close($conn); echo <<<EOM <script> $(document).ready(function() { $("#dblist").tablesorter(); } ); </script> EOM; ?> <!-- DBのデータをPHPで処理 --> </body> </html> >■補足 >・読み込んでいるJSは以下で御座います。 > jquery.tablesorter.min.js > jquery.js >・MAMPを使用しております。 >・DB接続は成功しております。 >・PHPのエラーは発生致しておりません。 >・PHPのバージョン:5.6.30 >・PostgreSQLのバージョン:10.5 >・MAMPのバージョン:5.0.1 > jqueryのバージョン:3.1.1 > jquery.tablesorterのバージョン:2.0.3 >■参考にしたサイト >■tablesorter.jsを簡単導入する方法 >https://beiznotes.org/install-tablesorter/ >■PHPとJavaScriptの連携 >https://so-zou.jp/web-app/tech/programming/php/sample/javascript-cooperation.htm#no2 ■ブラウザーで表示されるソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="viewport" content="width=device-width"> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> </head> <body> <!-- DBのデータをPHPで処理 --> string(27) "接続に成功しました" <table id="dblist" summary="PostgreSQLのデータベースの一覧"> <caption>データベース一覧</caption> <tr> <th abbr="field_a">field_a</th> <th abbr="field_b">field_b</th> <th abbr="field_c">field_c</th> </tr> <tr> <td>add_A </td> <td>add_B </td> <td>add_C </td> </tr> <tr> <td>add_A </td> <td>add_B </td> <td>add_C </td> </tr> <tr> <td>add_A </td> <td>add_B </td> <td>add_C </td> </tr> <tr> <td>add_A </td> <td>add_B </td> <td>add_C </td> </tr> <tr> <td>add_A </td> <td>add_B </td> <td>add_C </td> </tr> <tr> <td>add_A </td> <td>add_B </td> <td>add_C </td> </tr> <tr> <td>add_A </td> <td>add_B </td> <td>add_C </td> </tr> <tr> <td>add_1 </td> <td>add_2 </td> <td>add_3 </td> </tr> </table> <script> $(document).ready(function() { $("#dblist").tablesorter(); } ); </script><!-- DBのデータをPHPで処理 --> </body> </html>