CodeIgniter 3.xでJQuery Datatableプラグインが正しく動作しない

これは私の初めての投稿です。CodeIgniter 3.xでJQuery Datatableプラグインが正しく動作しない

私のプログラミングに関する知識は許してください。私はわずか3週間の練習でPHPにはかなり新しいです。私はちょうど私がPHPを練習しているほぼ同じ時間のために、Netbeansを使って単純なCodeIgniter 3.xプロジェクトに取り組んできました。 hereのJQuery Datatableプラグインを使用して簡単なデータテーブルを出力したいと思います。私はシンプルな「あなたの最初のデータテーブル」の例が正しくそこに掲載されていると思います。私のコードがうまくいかない理由は分かりませんが。

がここに表示され、私のindex.php、です：

<html> 
 
    <head> 
 
     <title> 
 
      Employee Database 
 
     </title> 
 
     <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/datatable-bootstrap.min.css" media="screen">     
 
     <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-3.2.1.js"></script> 
 
     <script type="text/javascript" src="<?php echo base_url(); ?>js/datatable.jquery.min.js"></script> 
 
     <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css"> 
 
     <script src="<?php echo base_url(); ?>js/index.js"></script> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <center> 
 
       <h1> 
 
        Employee DB 
 
       </h1> 
 
      </center> 
 
     </header> 
 
    <center>  
 
     <table class="table table-bordered"> 
 
      <thead> 
 
      <tr>    
 
       <th> 
 
        Employee Code 
 
       </th> 
 
       <th> 
 
        Employee Description 
 
       </th> 
 
       <th> 
 
        Employment Date 
 
       </th> 
 
       <th> 
 
        Dept. Code 
 
       </th> 
 
       <th> 
 
        Dept. Description 
 
       </th> 
 
      </tr> 
 
      </thead> 
 
      <?php foreach ($results as $results_item): ?>   
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
        <?php echo $results_item['empcode']; ?> 
 
       </td> 
 
       <td> 
 
        <?php echo $results_item['empdesc']; ?> 
 
       </td> 
 
       <td> 
 
        <?php echo $results_item['empdate']; ?> 
 
       </td> 
 
       <td> 
 
        <?php echo $results_item['deptcode']; ?> 
 
       </td> 
 
       <td> 
 
        <?php echo $results_item['deptdesc']; ?> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
      <?php endforeach; ?> 
 
     </table> 
 
     <div id="paging-first-datatable"></div> 
 
      <!--<?php //var_dump($results);?>--> 
 
     </center> 
 
    </body>  
 
</html>

ここに私のindex.jsです：

$('#first-datatable-output table').datatable({ 
 
    pageSize: 10, 
 
    sort: [true, true, true, true, true], 
 
    filters: [true, true, true, true, true], 
 
    filterText: 'What do you wish to find?' 
 
});

動作するようには思えません。私が得る唯一の出力は、ページングされていない完全なテーブルです。私はindex.jsのjavascriptのconsole.logを使って、単純なhelloの世界でそれらを正しくリンクしているかどうかを確認し、メッセージが期待どおりコンソールに出力されるようにしました。

解決策、反応、洞察力を深めていただければ幸いです。

ありがとうございます！

私は最終的にそれを稼働させることができました返信から！ Pagination

それを美化する方法任意のアイデア：

私の唯一の問題は今、彼らはこのような何かを見て改ページ

するためのボタンを固定していますか？

出典

2017-07-18 Amiel Vargas

datatablesプラグインに関連するエラーが発生していますか？ –

htmlコードの 'id ="最初のデータ出力可能な出力はどこですか？ –

コンソールのプラグインに関するエラーは発生していません。 idについては、リンク上に表示されている例だけをたどっていたので、どこに配置するかわかりません。テーブルの周りにidタグを置くことを試みますが、それが修正されるかどうかを確認してください。 –

foreachループ内にテーブル本体のタグがあります。このタグは、それぞれの結果のタグを出力します。あなたはあなたのforeachの外にそれらを配置する必要があります。この中

<?php foreach ($results as $results_item): ?>   
    <tbody> 
     <tr> 
      <td> 
       <?php echo $results_item['empcode']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['empdesc']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['empdate']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['deptcode']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['deptdesc']; ?> 
      </td> 
     </tr> 
    </tbody> 
<?php endforeach; ?>

：この変更

<tbody> 
    <?php foreach ($results as $results_item): ?>   
     <tr> 
      <td> 
       <?php echo $results_item['empcode']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['empdesc']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['empdate']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['deptcode']; ?> 
      </td> 
      <td> 
       <?php echo $results_item['deptdesc']; ?> 
      </td> 
     </tr> 
    <?php endforeach; ?> 
</tbody>

をドキュメントにはタグが本当に重要である述べています。これを試してみてください！

マニュアルを読むときには、JSを直接使用することもできます。多分それを試してみませんか？

は、あなたのindex.jsのためにこれを試してみてください：

var datatable = new DataTable(document.querySelector('#first-datatable-output table'), { 
    pageSize: 10, 
    sort: [true, true, true, true, true], 
    filters: [true, true, true, true, true], 
    filterText: 'What do you wish to find?' 
});

私はドキュメントのソースコードを検査しました。彼らはidを持つdivにテーブルを入れますfirst-datatable-output ...それらはどこにでも書かれていません。あなたは<div id="paging-first-datatable" class="pagination-datatables text-center">よう<div id="paging-first-datatable">へclass="pagination-datatables text-center"を追加してみてください、<table class="table table-bordered">前にこの<div id="first-datatable-output">を配置しようと</div>ページネーションのために

<div id="paging-first-datatable"></div> AFTERことができます。

聖...それらのドキュメントはbaaaaaaaaadです！

出典

2017-07-18 07:32:35 Clemenz

訂正ありがとう！データはテーブルに表示されますが、欠落しているのは、検索ボックスとプラグインの一部であると思われるページ番号だけです。 –

修正済み...申し訳ありません。たぶんJS実装を最初に試してみてください。お知らせ下さい。 – Clemenz

さて、私はjsを試してみましたが、驚いたことに、コンソールにエラーの束が表示されます。 'Uncaught TypeError：新しいDataTable（datatable.js：28）でnullののプロパティ 'tHead'を読み取れません at index.js：1' –

CodeIgniter 3.xでJQuery Datatableプラグインが正しく動作しない

答えて

関連する問題