0

開発初心者の質問で分かりにくい点が多々あるかと存じますが、ご了承くださいませ。

PHPでDBから取得したデータをテーブルとして表示し、そのデータを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>
10
  • PHPではなくて出力されたHTMLの方も追記できますか?
    – keitaro_so
    Commented 2018年8月23日 2:21
  • ご指摘頂き有難うございます。HTMLの方にソースコート修正致しました。
    – Kenjirou K
    Commented 2018年8月23日 2:29
  • 1
    言葉が足りなくて申し訳ないです。phpのソースではなくて、ブラウザで表示した際に右クリック「ページのソースを表示する」で表示されるHTMLを貼り付けてくださいということです。
    – keitaro_so
    Commented 2018年8月23日 2:32
  • 大変失礼致しました。ページのソースを追記致しました。なるほどで御座います。これを確認すれば、ソースの確認が可能で御座いますね!大変勉強になりました。
    – Kenjirou K
    Commented 2018年8月23日 2:43
  • さらにjqueryのバージョンとjquery.tablesorterのバージョンも追記お願いします
    – keitaro_so
    Commented 2018年8月23日 4:33

1 件の回答 1

0

このライブラリでは、テーブルのヘッダーをtheadタグで囲う必要があるようです。

    //テーブルヘッダとしてフィールド(カラム)名を出力
    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";

の個所を

    //テーブルヘッダとしてフィールド(カラム)名を出力
    print "<thead><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></thead>\n";

にしてみてください。

■追記
開示いただいているHTMLのソースをそのまま使わせていただき、jsファイルとcssファイルも配置して実際に動作を確認しましたが、私の環境では上記修正で動作しています。
Chrome、IE、Edgeで動作確認しました。

これで動作しないというのであれば、jqueryやライブラリへのパスの指定が怪しいと思われます。
私の環境では以下のように配置しています。

(document root)/index.html (開示いただいたHTMLを元に修正を加えたファイル)
(document root)/css/style.css (0kbの空ファイル)
(document root)/js/jquery.js (jQuery v3.3.1)
(document root)/js/jquery.tablesorter.min.js (ライブラリファイル)
(document root)/js/script.js (0kbの空ファイル)

ファイルの配置仕方が間違えていないか一度ご確認ください。

ちなみに上記index.htmlではテーブルのヘッダ部分を以下のように記述しています。

  <table id="dblist" summary="PostgreSQLのデータベースの一覧">
  <caption>データベース一覧</caption>
  <thead><tr>
  <th abbr="field_a">field_a</th>
  <th abbr="field_b">field_b</th>
  <th abbr="field_c">field_c</th>
  </tr></thead>
  <tr>
3
  • ご教示頂き有難うございます。上記修正を行い動作確認を致しましたが、現状ソートできない状態でございます。この他の箇所で何か問題ないか、再度調査致します。貴重な情報を頂き有難うございます!
    – Kenjirou K
    Commented 2018年8月23日 4:13
  • jqueryやライブラリへのパスの指定を再度くまなく確認致しましたが、 問題箇所が見つからず、ソート機能は実装できませんでした。 user17014様の環境では問題なく実装できたとの事でございますので、 あとは私の環境になんらかの問題があるのかと存じます。 もう少し調査をし、無理でしたら、別のライブラリ等を検討致します。 ご教授、ご確認までして頂き有難うございました。 こちらの件は、こちらでクローズさせて頂きます。 user17014様いつもご教示頂き有難う御座います!今回も大変勉強になりました!
    – Kenjirou K
    Commented 2018年8月23日 5:33
  • user17014様、無事に問題解決致しました。原因は、user17014様ご指摘とおり、 「jqueryやライブラリへのパス」にあったようで御座います。 いつの間にかjquery.jsを古いバージョンと最新バージョンを2つ読み込んでいた事が原因のようで御座います。無事にソート機能が実装できました。有難うございました!
    – Kenjirou K
    Commented 2018年8月23日 6:34

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。