JQUERY數據表安裝

我想爲我的項目使用datatables jquery插件。我正在CakePHP上做這個項目。我似乎無法獲得數據表的運行。我不太確定我的代碼是否正確。此外，我還在Webroot/css和Webroot/js下的我的目錄中添加了css文件和兩個JS文件。有人可以幫我嗎？JQUERY數據表安裝

我的代碼如下：

<html> 
<head> 
<!-- DataTables CSS --> 
<link rel="stylesheet" type="text/css" href="/DataTables-1.10.0/css/jquery.dataTables.css"> 

<!-- jQuery --> 
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.0/js/jquery.js"></script> 

<!-- DataTables --> 
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.0/js/jquery.dataTables.js"></script> 
$(document).ready(function() { 
    $('#callTable').DataTable(); 
}) 
</head> 

<?php 
$usertype=$this->SESSION->read('User.usertype'); 
if($usertype=="admin") 
    echo $this->element('setTopNavigation'); 
else 
    echo $this->element('setTopNavigationStaff'); 

//var_dump($calls); 
?> 
<div class="callsIndex"> 
    <h2><?php echo __('Call Details'); ?> </h2> 
    <div class="bottomButtonnew"><?php echo $this->Html->link(__('Add Calls'), array('action' => 'add')); ?></div> 
    <table id="callTable" cellpadding="0" cellspacing="0"> 
      <tr> 
      <th><?php echo $this->Paginator->sort('Call Date'); ?></th> 
      <th><?php echo $this->Paginator->sort('Call Time'); ?></th> 
      <th><?php echo $this->Paginator->sort('Comments'); ?></th> 
      <th><?php echo $this->Paginator->sort('Next Call Date'); ?></th> 
      <th><?php echo $this->Paginator->sort('Customer Name'); ?></th> 
      <th><?php echo $this->Paginator->sort('Company Name'); ?></th> 
      <th><?php echo $this->Paginator->sort('Employee Name'); ?></th> 
      <th class="actions"><?php echo __(''); ?></th> 
     </tr> 
     <?php foreach ($calls as $call): ?> 

     <?php 
      $class =''; 
      if($call['Call']['next_call_date']==date('Y-m-d')){ 
       $class = ' class="call_for_today"'; 
      } 
     ?> 
      <tr<?php echo $class; ?>> 
       <td><?php echo date("d-m-Y", strtotime($call['Call']['call_date'])); ?>&nbsp;</td> 
       <td><?php echo h($call['Call']['call_time']); ?>&nbsp;</td> 
       <td><?php echo h($call['Call']['comments']); ?>&nbsp;</td> 
       <td><?php echo date("d-m-Y", strtotime($call['Call']['next_call_date'])); ?>&nbsp;</td> 
       <td> 
        <?php echo $this->Html->link($call['Customers']['customer_name'], array('controller' => 'customers', 'action' => 'view', $call['Customers']['id'])); ?> 

       </td> 
       <td> 
        <?php echo $this->Html->link($call['Companies']['company_name'], array('controller' => 'companies', 'action' => 'view', $call['Companies']['id'])); ?> 
       </td> 
       <td> 
        <?php echo $this->Html->link($call['Employees']['employee_name'], array('controller' => 'employees', 'action' => 'view', $call['Employees']['id'])); ?> 
       </td> 
       <td class="actions"> 
        <?php echo $this->Html->link(__('View'), array('action' => 'view', $call['Call']['id'])); ?> 
       </td> 
      </tr> 
     <?php endforeach; ?> 
    </table> 
    <p> 
     <?php 
     echo $this->Paginator->counter(array(
      'format' => __('Page {:page} of {:pages}, showing {:current} records out of {:count} total') 
     )); 
     ?> </p> 
    <div class="paging"> 
     <?php 
     echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled')); 
     echo $this->Paginator->numbers(array('separator' => '')); 
     echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled')); 
     ?> 
    </div> 
    <br> 

</div>

來源

2014-06-25 user3652541

有兩個問題與您的代碼。在document.ready

<script> 
$(document).ready(function() { 
    $('#callTable').DataTable(); 
}); 
</script>

2）結束並與表結構的數據表的工作已經報頭封裝在<thead></thead>標籤和行）;

1）添加document.ready內部script標籤，並把分號（如下所示<tbody></tbody> ：

<table id="callTable" cellpadding="0" cellspacing="0"> 
      <thead> 
      <tr> 
      <th><?php echo $this->Paginator->sort('Call Date'); ?></th> 
      <th><?php echo $this->Paginator->sort('Call Time'); ?></th> 
      <th><?php echo $this->Paginator->sort('Comments'); ?></th> 
      <th><?php echo $this->Paginator->sort('Next Call Date'); ?></th> 
      <th><?php echo $this->Paginator->sort('Customer Name'); ?></th> 
      <th><?php echo $this->Paginator->sort('Company Name'); ?></th> 
      <th><?php echo $this->Paginator->sort('Employee Name'); ?></th> 
      <th class="actions"><?php echo __(''); ?></th> 
     </tr> 
</thead> 
<tbody> 
     <?php foreach ($calls as $call): ?> 

     <?php 
      $class =''; 
      if($call['Call']['next_call_date']==date('Y-m-d')){ 
       $class = ' class="call_for_today"'; 
      } 
     ?> 
      <tr<?php echo $class; ?>> 
       <td><?php echo date("d-m-Y", strtotime($call['Call']['call_date'])); ?>&nbsp;</td> 
       <td><?php echo h($call['Call']['call_time']); ?>&nbsp;</td> 
       <td><?php echo h($call['Call']['comments']); ?>&nbsp;</td> 
       <td><?php echo date("d-m-Y", strtotime($call['Call']['next_call_date'])); ?>&nbsp;</td> 
       <td> 
        <?php echo $this->Html->link($call['Customers']['customer_name'], array('controller' => 'customers', 'action' => 'view', $call['Customers']['id'])); ?> 

       </td> 
       <td> 
        <?php echo $this->Html->link($call['Companies']['company_name'], array('controller' => 'companies', 'action' => 'view', $call['Companies']['id'])); ?> 
       </td> 
       <td> 
        <?php echo $this->Html->link($call['Employees']['employee_name'], array('controller' => 'employees', 'action' => 'view', $call['Employees']['id'])); ?> 
       </td> 
       <td class="actions"> 
        <?php echo $this->Html->link(__('View'), array('action' => 'view', $call['Call']['id'])); ?> 
       </td> 
      </tr> 
     <?php endforeach; ?> 
</tbody> 
    </table>

來源

2014-06-25 12:35:23

我做了您指出的更改，但搜索欄不顯示在頁面上。 – user3652541

這樣調用數據表'$（'＃callTable'）。DataTable（{「bFilter」：true}）;' –

你$(document).ready處理程序需要放置一個<script>標籤內

來源

2014-06-25 12:32:57

JQUERY數據表安裝

回答

相關問題