質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

サーバーからデータ取得後のDatatablesでページ切り替えができない

Nishin
Nishin

総合スコア30

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

2回答

0評価

0クリップ

202閲覧

投稿2021/12/07 15:42

編集2021/12/07 15:45

PHP&MySQLと、JQueryのDatatablesを使った、一覧表示アプリを作成しようとしています。CRUD機能は、画面遷移でなくJQueryのモーダルとAjaxを利用しています。

尚、サーバーはさくらレンタルサーバーでphpMyAdminを利用しています。

ディレクトリ、ファイルの現状

これまでに作成してきたファイルのうち、問題の現象に関連すると思われるものは、以下のとおりです。

php

~ db.php ~ <?php $dsn = '(自分のサーバーDSN)'; $dbname = '(サーバー名)'; $username = '(ユーザ名)'; $password = '(パスワード)'; $connection = new PDO( 'mysql:host='.$dsn.';dbname='.$dbname, $username, $password ); ?>

php

~ user_ajax/function.php ~ <?php $theme = "閲覧してきた『ググリサイト』一覧"; $td = array("ピックアップページ", "関連ページ", "タグ1", "タグ2"); $table = "webgoogles"; $column = array("id", "name", "namesurl", "sight", "url", "tag_1", "tag_2"); function get_total_all_records(){ include('../db.php'); $statement = $connection->prepare("SELECT * FROM ".$table); $statement->execute(); $result = $statement->fetchAll(); return $statement->rowCount(); } ?>

php

~ user_ajax/index.php ~ <html> <?php include('function.php'); ?> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <input type="hidden" id="theme" value=<?php echo $theme ?>> <div class="container box"> <h1 id="title" align="center">PHP PDO Ajax CRUD with Data Tables and Bootstrap Modals</h1> <br> <div class="table-responsive"> <br> <div align="right"> <button type="button" id="add_button" data-toggle="modal" data-target="#userModal" class="btn btn-info btn-lg">新規追加</button> </div> <br> <br> <table id="user_data" class="table table-bordered table-striped"> <thead> <tr> <th class="nowrap"><?php echo $td[2] ?></th> <th class="nowrap"><?php echo $td[3] ?></th> <th class="nowrap"><?php echo $td[0] ?></th> <th class="nowrap"><?php echo $td[1] ?></th> <th class="nowrap">編集</th> <th class="nowrap">削除</th> </tr> </thead> </table> </div> </div> <div id="userModal" class="modal fade"> <div class="modal-dialog"> <form method="post" id="user_form" enctype="multipart/form-data"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">新規追加</h4> </div> <div class="modal-body"> <label><?php echo $td[0] ?></label> <input type="text" name=<?php echo $column[1] ?> id=<?php echo $column[1] ?> class="form-control" placeholder=<?php echo $td[0]."を入力" ?>> <br> <label><?php echo $td[0]."URL" ?></label> <input type="text" name=<?php echo $column[2] ?> id=<?php echo $column[2] ?> class="form-control" placeholder=<?php echo $td[0]."URLを入力" ?>> <br> <label><?php echo $td[1] ?></label> <input type="text" name=<?php echo $column[3] ?> id=<?php echo $column[3] ?> class="form-control" placeholder=<?php echo $td[1]."を入力" ?>> <br> <label><?php echo $td[1]."URL" ?></label> <input type="text" name=<?php echo $column[4] ?> id=<?php echo $column[4] ?> class="form-control" placeholder=<?php echo $td[1]."URLを入力" ?>> <br> <label>タグ</label> <input type="text" name=<?php echo $column[5] ?> id=<?php echo $column[5] ?> placeholder=<?php echo $td[2] ?>> <input type="text" name=<?php echo $column[6] ?> id=<?php echo $column[6] ?> placeholder=<?php echo $td[3] ?>> <br> </div> <div class="modal-footer"> <input type="hidden" name="user_id" id="user_id"> <input type="hidden" name="operation" id="operation"> <input type="submit" name="action" id="action" class="btn btn-success" value="新規追加"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> </div> </div> </form> </div> </div> <script type="text/javascript" language="javascript"> function _(query){ return document.querySelector(query) } const theme = _("#theme").value; document.title = theme; _("#title").innerText = theme; $('#add_button').click(function(){ $('#user_form')[0].reset(); $('.modal-title').text("新規追加"); $('#action').val("新規追加"); $('#operation').val("Add"); }); var dataTable = $('#user_data').DataTable({ "language": { "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" }, "info": false, "paging:": true, 'pagingType': 'full_numbers', "processing": true, "serverSide": true, "lengthMenu": [ 10, 20, 50 ], "order": [], "ajax": { url:"fetch.php", type:"POST" }, "columnDefs": [ { "targets": [0,1], "width": "10%" }, { "targets": [2,3], "width": "30%" }, ] }); $(document).on('submit', '#user_form', function(event){   **~ 一覧表示に関するものでない為、文字数の都合で省略 ~** }); $(document).on('click', '.update', function(){   **~ 一覧表示に関するものでない為、文字数の都合で省略 ~** }); $(document).on('click', '.delete', function(){   **~ 一覧表示に関するものでない為、文字数の都合で省略 ~** }); </script> </body> </html>

php

~ user_ajax/fetch.php ~ <?php include('../db.php'); include('function.php'); $query = ''; $output = array(); $query .= "SELECT * FROM ".$table." "; if(isset($_POST["search"]["value"])){ $query .= 'WHERE '.$column[1].' LIKE "%'.$_POST["search"]["value"].'%" '; $query .= 'OR '.$column[3].' LIKE "%'.$_POST["search"]["value"].'%" '; } if(isset($_POST["order"])){ $query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' '; }else{ $query .= 'ORDER BY id DESC '; } if($_POST["length"] != -1){ $query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length']; } $statement = $connection->prepare($query); $statement->execute(); $result = $statement->fetchAll(); $data = array(); $filtered_rows = $statement->rowCount(); foreach($result as $row){ $sub_array = array(); if(mb_strlen($row[$column[1]])>25){ $row[$column[1]] = mb_substr($row[$column[1]], 0, 25)." ..."; } if(mb_strlen($row[$column[3]])>25){ $row[$column[3]] = mb_substr($row[$column[3]], 0, 25)." ..."; } $sub_array[] = $row[$column[5]]; $sub_array[] = $row[$column[6]]; $sub_array[] = '<a href="'.$row[$column[2]].'" target="_blank" onClick="return confirm(\'このサイトに移動しますか?\')" class="deco-none">' .'<span class="nowrap">'.$row[$column[1]].'</span></a>'; $sub_array[] = '<a href="'.$row[$column[4]].'" target="_blank" onClick="return confirm(\'このサイトに移動しますか?\')" class="deco-none">' .'<span class="nowrap">'.$row[$column[3]].'</span></a>'; $sub_array[] = '<button type="button" name="update" id="'.$row["id"].'" class="btn btn-warning btn-xs update">編集</button>'; $sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-xs delete">削除</button>'; $data[] = $sub_array; } $output = array( "draw" => intval($_POST["draw"]), "recordsTotal" => $filtered_rows, "recordsFiltered" => get_total_all_records(), "data" => $data ); echo json_encode($output); ?>

(字数の関係でuser_ajax/fetch_single.phpとuser_ajax/delete.phpは省略)

DBからのフェッチによる一覧表示もCRUDに関わる機能も、一通り動くことを確認できています。

Datatablesの機能としては、検索機能、列の幅、ソート、件数選択などの、ページング以外の一通りの機能は画面内に表示されて動くことを確認できています。

###困りごと

問題のページングボタンは、表示自体はされているのですが、何故か押して表示を切り替えようとしても禁止マークが出て押すことができません(添付画像のとおりです)。
index.php表示時

この状態が作成後から依然として続いております。

###試みたこと

  • こちらのサイト を参考にして、JQueryとBootstrapのバージョンをそれぞれ3と4変更してアップし直したのですが、状況は変わりませんでした。
  • index.phpのDatatablesで、pagingTypeを「full_number」以外のものに変更してみても、表示されるページングボタンの種類が変わるだけで、押せないことに変わりありませんでした。
  • index.htmlのヘッダースタイルタグ内に「cursor: pointer」を記述してみましたが、これでも押下後に何も変化はありませんでした。

果たして、どのファイルにどのような記述を施せば、このエラーは解消されるのか、もはや皆目見当がつかず埒が明かない状況が続いてしまっています。

至らぬ事が多く、お目汚し申し訳ございませんが、この点についてご存じの方がいらっしゃいましたら、どうかご回答をお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

cerfweb

2021/12/07 15:59

データは何件中20件の表示となっていますか。オプションのinfoをtrueにして確認していただけますか。
Nishin

2021/12/08 00:14

ご返答ありがとうございます。 先程レンタルサーバーに収めているindex.phpのdatatables部分を編集して確認したところ、テーブルの左下にこう表示されておりました。 「Showing 0 to 0 of 0 entries (filtered from 10 total entries)」 データ自体はこれまでに75件程登録している筈なのですが、そうなるとサーバーの情報を、何故だかdatatablesがうまくキャッチ出来ていない、という事なのでしょうか ...
cerfweb

2021/12/08 08:27

提示されているスクリーンショットでは20件表示されていますが、何件のうち20件かわかりますか。
Nishin

2021/12/08 09:37

75件中の20件です。 宜しければ、phpMyAdminのMySQLでの表示内容をスクショしたものか、レコードをJSON形式でエクスポートしたものをお見せすることもできます。
cerfweb

2021/12/08 09:45

データベースに入っているデータではなく、テーブルに読み込まれているデータです。オプションのinfoをtrueにすれば表示されると思いますが。
Nishin

2021/12/08 11:17

info: trueとして画面を更新したところ、テーブル(20件/頁の設定で、レコード75件分のうち20件が表示されている)左下には「「Showing 0 to 0 of 0 entries (filtered from 20 total entries)」」とありました。 「困りごと」に挙げた画面の画像のとおりテーブルが表示されている左下に、このようなメッセージが表示されている格好です。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。