47747


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

PHPでDBから取得したデータをテーブルとして表示し、そのデータをjQueryを使用して  
テーブルをソートできるように実装したいのですが、下記のコードではソート機能が  
実装されません。  
PHP,jQueryにお詳しい方、お手数では御座いますが、ご教授頂きたく存じます。  
宜しくお願い致します。

■ソースコード（index.php）

[code]

      <!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>
    
[/code]

> ■補足  
>  ・読み込んでいる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>

■ブラウザーで表示されるソースコード

[code]

      <!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>
    
[/code]


CC BY-SA 4.0
2018-08-23T02:17:33.097
47741
2018-08-24T05:03:06.143
2020-06-17T08:14:45.997
-1
29466
question
javascript php
PHPでDBから取得したデータを、JSでソート可能なHTMLのテーブルとして表示したい


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

[code]

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

の個所を

[code]

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

にしてみてください。

■追記  
開示いただいている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ではテーブルのヘッダ部分を以下のように記述しています。

[code]

      <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>
    
[/code]


CC BY-SA 4.0
2018-08-23T03:14:54.677
47747
2018-08-23T04:39:12.963
2018-08-23T04:39:12.963
17014
17014
47741
answer