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