JQuery Datatable插件在CodeIgniter 3.x中無法正常工作

這將是我第一次在這裏發佈。JQuery Datatable插件在CodeIgniter 3.x中無法正常工作

請原諒我的編程知識。僅僅3周的練習，我對PHP相當陌生。我剛剛在使用Netbeans開發一個簡單的CodeIgniter 3.x項目，幾乎與此同時我正在練習PHP。我想用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 world，並且消息按照預期在控制檯上輸出，style.css似乎也可以工作。

任何解決方案，反應和洞察力深表感謝！

謝謝!!!

好吧，從我得到的答覆，我終於設法讓它工作！

我唯一的問題是現在固定按鈕分頁

他們是這個樣子：Pagination

任何想法如何雲杉它？

來源

2017-07-18 Amiel Vargas

你是否得到任何與數據表插件相關的錯誤？ –

你的html代碼中的'id =「first-datatable-output」'在哪裏？ –

我沒有收到與控制檯上插件相關的任何錯誤。至於id我只遵循鏈接上顯示的例子，所以我不知道該把它放在哪裏。儘管我會嘗試在表格周圍放置一個帶有id first-datatable-output的div標籤，然後查看是否可以修復它 –

在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爲first-datatable-output的div中......他們沒有在任何地方記錄。你可以嘗試把這個<div id="first-datatable-output"> BEFORE <table class="table table-bordered">和</div> AFTER <div id="paging-first-datatable"></div>

對於分頁，嘗試添加class="pagination-datatables text-center"到<div id="paging-first-datatable">像<div id="paging-first-datatable" class="pagination-datatables text-center">。

聖...他們的文檔是baaaaaaaaad！

來源

2017-07-18 07:32:35 Clemenz

感謝您的更正！數據確實出現在表格中，但現在唯一缺少的東西是搜索框和分頁，它們應該是插件的一部分。 –

更正...對不起，我讀得不夠遠。也許先嚐試JS實現？讓我知道。 – Clemenz

好吧，所以我嘗試了一個js，令我驚訝的是控制檯上出現了一堆錯誤。 '未捕獲的TypeError：無法在新的DataTable（datatable.js：28）處讀取屬性'tHead'爲null 'index.js：1' –

JQuery Datatable插件在CodeIgniter 3.x中無法正常工作

回答

相關問題