#javascript #jquery #cakephp #jquery-datatables
#javascript #jquery #cakephp #jquery-таблицы данных
Вопрос:
Я хочу использовать плагин datatables jquery для своего проекта. Я делаю проект на CakePHP. Кажется, я не могу запустить таблицы данных. Я не совсем уверен, что мой код правильный. Также я добавил файл css и два файла JS в свой каталог под Webroot/css и Webroot/js. Может кто-нибудь мне помочь, пожалуйста?
Мой код выглядит следующим образом:
<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'])); ?>amp;nbsp;</td>
<td><?php echo h($call['Call']['call_time']); ?>amp;nbsp;</td>
<td><?php echo h($call['Call']['comments']); ?>amp;nbsp;</td>
<td><?php echo date("d-m-Y", strtotime($call['Call']['next_call_date'])); ?>amp;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>
Ответ №1:
В вашем коде есть две проблемы.
1) Добавьте document.ready внутренний script тег и поставьте точку с запятой (;) в конце document.ready
<script>
$(document).ready( function () {
$('#callTable').DataTable();
} );
</script>
2) И datatable работают со структурой таблицы, которая имеет заголовок, заключенный в <thead></thead> тег, и строку, заключенную внутри <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'])); ?>amp;nbsp;</td>
<td><?php echo h($call['Call']['call_time']); ?>amp;nbsp;</td>
<td><?php echo h($call['Call']['comments']); ?>amp;nbsp;</td>
<td><?php echo date("d-m-Y", strtotime($call['Call']['next_call_date'])); ?>amp;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>
Комментарии:
1. Я внес изменения, на которые вы указали, но панель поиска не отображается на странице.
2. вызовите datatable следующим образом ‘$(‘#callTable’). DataTable({«bFilter»: true});’
Ответ №2:
Ваш $(document).ready обработчик должен быть помещен внутри <script> тега