[英]how to add tabletools to existing datatables?
好的,我有一个使用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是表ID
好。
表工具是数据表的插件,需要很多步骤才能使其工作。
我看不到您的标头,所以我不知道您所包含的内容(js,css)
首先,您需要具有标准数据表的所有脚本/ css。
除此以外,您还需要转到https://www.datatables.net/extensions/tabletools/plugins并下载/保存javascript并将其添加到要加载的标头中,还需要下载,保存和加载标题中的表格工具css表也是如此-再次,我看不到您已经这样做了。
转到https://www.datatables.net/release-datatables/extensions/TableTools/examples/simple.html ,在本地保存所有HTML / JS / CSS并创建一个文件以在本地进行测试。 一旦可以使用外部文件,就开始包括服务器上的文件(js / css)-如果仍然可以使用,则知道您拥有所有必需的库。
然后尝试您的代码-如果无法正常工作,则在其中放入SIMPLE表-您甚至可以使用表工具站点中的代码。
如果仍然无法使用,调试控制台会告诉您什么(Firefox / Chrome)?
将tabletools swf文件添加到datatable选项,并将datatables js和css文件添加到代码中
$('#status_table').DataTable({
"tableTools": {
"sSwfPath": "packages/datatables-tabletools/swf/copy_csv_xls_pdf.swf"
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.