PHPの検索結果をcsvファイルで出力するのにData tableを使ってボタンを一つにしたい。

Question

前提・実現したいこと

PHPでユーザーが入力した内容をDB内で検索し、結果をcsvファイルでダウンロードしたいです。
SQLで検索後、Data table（jQueryのプラグイン）を使って検索結果をテーブル化して表示できるようにし、なおかつcsvでダウンロードできるようなボタンを一つ作成したいです。

発生している問題・エラーメッセージ

検索結果を表示させる回数分のcsvボタンが作成されてしまいました。（当たり前ですね…）

該当のソースコード

<?php
        
            if($stmt){
                $ct = 0;
                echo '<p>検索結果</p>';
                echo '<br>';
                echo '<table border="1"=table id="example" class="display" cellspacing="0" width="100%">
                <tr><th>○○</th></tr>
                 ';     
                 
                foreach($stmt as $row){
                    if($ct == 0){
                    }
                    
                    echo '<tr>';
                    echo '<td>'.$row['○○'].'</td>';
                
                    

                    $ct++;
                
               
                    echo <<<EOM
                    <script type="text/javascript">
                    $(document).ready(function() {
                    var table = $('#example').DataTable( {
                    "scrollY": "200px",
                    "retrieve":true,
                    "paging": false
                   
                     } );
      
                    var tables = $("#example").tableExport({
                    formats: ["csv"],
                    bootstrap: false
                    });
      
                    $('input.toggle-vis').on( 'change', function (e) {
                    e.preventDefault();
                    var column = table.column( $(this).attr('data-column') );
                    column.visible( ! column.visible() );
                    $("#example").tableExport().update();
                    });
      
                 } );
                 </script>
                 EOM;
    
                }
                }

                if($ct ==0){
                    echo '<div>該当するデータはありません</div>'; 
                }
               
            }
            else{         
            }

        
            echo ' </table>';
            
            
          

            
    ?>

ファイルがありませんという表示

試したこと

上記のphp内に記述した<script>文をphp外に記述した→csv出力ボタンが表示されず。

補足情報（FW/ツールのバージョンなど）

使用しているリンク

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.9/xlsx.core.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.9/js/tableexport.min.js"></script>
 

PHP初心者です。phpの検索結果をcsv化する方法がわからずいくつかのサイトを参考にして作成しました。
さらにif文を追加するべき（検索結果内容が１つ以上であればcsvファイル出力ボタンは一つ）など考えましたが、どのような解決方法があるでしょうか。
ご教授願います。
よろしくお願いします。
参考サイト
https://datatables.net/manual/options
https://qiita.com/328/items/f6dc79e4f552c1bff312#table

Answer 1

質問の意図がわかりませんが
HTMLでテーブル表記しつつ、CSVダウンロードする画面も出したいのですか？
まずは表記しておきアンカーにdownload属性をつけてclickするとか

sample

csvデータを表示させつつダウンロードさせる

<?PHP
$csv=file_get_contents("sample.csv");
$src="data:text/csv;base64,".base64_encode($csv);
?>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('a[download]').click();
});
</script>
<textarea><?=htmlspecialchars($csv)?></textarea>
<a href="<?=$src?>" download="sample.csv"></a>

修正版

よくよく考えたら同じドメイン内ならbase64しなくてもよかったですね

<?PHP
$csv=file_get_contents("sample.csv");
?>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('a[download]').click();
});
</script>
<textarea><?=htmlspecialchars($csv)?></textarea>
<a href="sample.csv" download="sample.csv"></a>

Comments

[susumukunn]

回答ありがとうございます。yambejpさんのいう通り、テーブル表記しつつ、csvダウンロードするボタンを設置したいです。
素人質問ですみません。
HTMLでテーブルを表記するというのは該当のコード　echo '<p>検索結果</p>';（以降コード）とは別物でしょうか。

[yambejp]

sampleを確認下さい
テーブル化は本題に関連が薄いのでtextareaで代用しました

[susumukunn]

アンカーにdownload属性をつけてclickについて→
ボタンの解決法についてアドバイスくださりありがとうございます。
<a id="download" download="test.csv" onclick=handleDownload()></a>
をecho ' </table>';の下に記述しました。
しかし恥ずかしながらphpの検索データとcsvダウンロードを記述しているscript文との紐づけがうまくいかず、ダウンロードが失敗し、ファイルがありませんと表示されます。

該当コード
echo ' </table>';
<a id="download" download="test.csv" onclick=handleDownload()></a>
echo <<<EOM
<script type="text/javascript">
$(document).ready(function handleDownload() {....
と変更しました。

[susumukunn]

sampleありがとうございます。確認後再度コメントします。

[yambejp]

修正版あげておきました。

[susumukunn]

再度の質問で申し訳ありません。修正版のsampleを参考にしましたが、$csv=file_get_contents("sample.csv");がfile_get_contents(sample.csv): failed to open streamとなってエラーになってしまいました。
そのためsampleのおかげでファイルを読み込んだ時にcsvファイルをPＣにダウンロードする動作をしましたがファイルがありませんと表示されます。
今回DB内の検索した結果を同じページ（同一ファイル）に表示するようにプログラムをしているためでしょうか。記述位置が間違っているのでしょうか。もう少しお力を貸してほしいです。

[yambejp]

csvファイルがどこにあるかは私にはわかりません。
DBから読む場合はファイルとして保持されていないので
修正前のようなbase64でエンコードして組み込んで下さい

[susumukunn]

アドバイスありがとうございます。DBから読む場合です。浅学ですみません。base64でエンコードできませんでした。 下記のコードを記述したところ、ダウンロードするとファイルがありませんと表示が出ます。
エンコードができていないということですよね。どこが違うのでしょうか。
<?php
if($stmt){
$ct = 0;
echo '<p>検索結果</p>';
echo '<br>';
echo '<table border="1">
<tr>th>○○</th><th>××</th></tr>
';
foreach($stmt as $row){
if($ct == 0){}
echo '<tr>';
echo '<td>'.$row['××'].'</td>';
　　　　　　echo '<td>'.$row['○○'].'</td>';
$ct++;
}
}
if($ct ==0){
echo '<div>該当するデータはありません</div>';
}
else{
}
echo ' </table>';
$str =$row['××'];
$str =$row['〇〇'];
$src=base64_encode($str);
?>
<a href="<?=$src?>" download="sample.csv"></a>

参考にしたサイト
https://www.tairaengineer-note.com/php-base64encode/
https://www.php.net/manual/ja/function.base64-encode.php
https://techacademy.jp/magazine/47478