как добавить tabletools в существующие таблицы данных?
Окей, ребята, у меня есть страница с динамической таблицей, использующая таблицы данных jquery
<div class="widget">
<div class="widget-head">
<h5>Usuarios</h5>
</div>
<div class="widget-body">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table cellpadding="0" cellspacing="0" border="0" id="data-table" width="100%">
<thead>
<tr>
<th><?php echo lang('index_fname_th');?></th>
<th><?php echo lang('index_lname_th');?></th>
<th><?php echo lang('index_email_th');?></th>
<th><?php echo lang('index_groups_th');?></th>
<th><?php echo lang('index_code_th');?></th>
<th><?php echo lang('index_status_th');?></th>
<th><?php echo lang('index_action_th');?></th>
<th><?php echo lang('index_net_th');?></th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user):?>
<tr>
<td><?php echo htmlspecialchars($user->first_name,ENT_QUOTES,'UTF-8');?></td>
<td><?php echo htmlspecialchars($user->last_name,ENT_QUOTES,'UTF-8');?></td>
<td><?php echo htmlspecialchars($user->email,ENT_QUOTES,'UTF-8');?></td>
<td>
<?php foreach ($user->groups as $group):?>
<?php echo anchor("auth/edit_group/".$group->id, htmlspecialchars($group->name,ENT_QUOTES,'UTF-8')) ;?><br />
<?php endforeach?>
</td>
<td><?php echo htmlspecialchars($user->codigo,ENT_QUOTES,'UTF-8');?></td>
<td><?php echo ($user->active) ? anchor("auth/deactivate/".$user->id, lang('index_active_link')) : anchor("auth/activate/". $user->id, lang('index_inactive_link'));?></td>
<td><?php echo anchor("auth/edit_user/".$user->id, 'Edit') ;?></td>
<td><?php echo htmlspecialchars($user->red,ENT_QUOTES,'UTF-8');?></td>
</tr>
<?php endforeach;?>
</tbody>
<tfoot>
<tr>
<th><?php echo lang('index_fname_th');?></th>
<th><?php echo lang('index_lname_th');?></th>
<th><?php echo lang('index_email_th');?></th>
<th><?php echo lang('index_groups_th');?></th>
<th><?php echo lang('index_code_th');?></th>
<th><?php echo lang('index_status_th');?></th>
<th><?php echo lang('index_action_th');?></th>
<th><?php echo lang('index_net_th');?></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div class="widget-foot">
</div>
</div>
редактировать:
это мой сценарий JS:
/* Data Table */
/* ********** */
$(document).ready(function() {
$('#data-table').dataTable({
"sPaginationType": "full_numbers",
"dom": 'T<"clear">lfrtip'
});
});
/* ****************************** */
и мой css — это большой файл, который вы скачиваете с веб-страницы datatables.
Я потратил почти неделю, пытаясь добавить tabletools в мой код, я просто не могу понять документацию, может кто-нибудь указать мне правильное направление, пожалуйста.
Спасибо всем!
Решение
сначала импортируйте пакет данных tabletools
после этого распаковали папку, в которой находится папка вашего проекта
после этого включите исходный файл
как это
<script src="http://localhost:88/project_name/DataTables-1.10.7/media/js/jquery.js"></script>
<script src="http://localhost:88/project_name/DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script src="http://localhost:88/project_name/DataTables-1.10.7/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<link href="http://localhost:88/project_name/DataTables-1.10.7/media/css/jquery.dataTables.css"rel="stylesheet">
<link href="http://localhost:88/project_name/DataTables-1.10.7/extensions/TableTools/css/dataTables.tableTools.css"rel="stylesheet">
и после этого
включить функцию jquery
<script>
$(document).ready(function() {
$('#index1').DataTable( {
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "http://localhost:88/project_name/DataTables1.10.7/extensions/TableTools/swf/copy_csv_xls.swf"}
} );
} );
</script>
здесь index1 — идентификатор таблицы
Другие решения
Хорошо.
Табличные инструменты — это PLUGIN для таблиц данных, для того чтобы это заработало, необходимо выполнить ряд шагов.
Я не вижу ваш заголовок, поэтому я не знаю, что вы включили (js, css)
Для начала вам нужно иметь все скрипты / css для стандартных таблиц данных.
В дополнение к этому вам нужно идти https://www.datatables.net/extensions/tabletools/plug-ins и загрузите / сохраните javascript и добавьте его в загружаемый заголовок, вам также необходимо загрузить, сохранить и загрузить таблицу CSS для инструментов таблиц в свой заголовок — опять же я не вижу, что вы сделали это.
Идти к https://www.datatables.net/release-datatables/extensions/TableTools/examples/simple.html, сохраните все HTML / JS / CSS локально и создайте файл для проверки этого локально. Как только это сработает с внешними файлами, начните включать файлы (js / css) на вашем сервере — если он все еще работает, вы знаете, что у вас есть все необходимые библиотеки.
Затем попробуйте свой код — если он не работает, поместите в них простую таблицу — вы даже можете использовать код с сайта инструментов для работы с таблицами.
Если он все еще не работает, что говорит консоль отладки (Firefox / Chrome)?
Добавьте SWF-файл tabletools к вашим параметрам данных и добавьте файлы dsatatables js и css в свой код
$('#status_table').DataTable({
"tableTools": {
"sSwfPath": "packages/datatables-tabletools/swf/copy_csv_xls_pdf.swf"}
});