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

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>