如何将 tabletools 添加到现有数据表？

Posted 2023-05-09

【中文标题】如何将 tabletools 添加到现有数据表？

【英文标题】：how to add tabletools to existing datatables?

【发布时间】：2015-08-01 00:48:15

【问题描述】：

好的，伙计们，我有一个使用 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" >
<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 是您从数据表网页下载的大文件。

我花了将近一周的时间尝试将表格工具添加到我的代码中，我只是无法理解文档，请谁能指出我正确的方向。

谢谢大家！

【问题讨论】：

你的意思是“数据表”的“表格工具”吗？

那么它在做什么或不做什么......或者它工作或不工作......或者表格是否显示或不显示......还有你在哪里看到的标题数据表工作所需的 JS 和 CSS ...

好数据表工作正常，我只是想添加表工具

【参考方案1】：

先导入数据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

【参考方案2】：

好的。

表格工具是数据表格的插件，需要一些步骤才能使其工作。

我看不到你的标题，所以我不知道你包含了什么（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） - 如果它仍然有效，您就知道您拥有所有必需的库。

然后尝试您的代码 - 如果它不起作用，请将 SIMPLE 表放入其中 - 您甚至可以使用表格工具站点中的那个。

如果它仍然无法工作，调试控制台会告诉您什么（Firefox/Chrome）？

【参考方案3】：

将 tabletools swf 文件添加到您的数据表选项中，并将数据表 js 和 css 文件添加到您的代码中

$('#status_table').DataTable(
    "tableTools": 
        "sSwfPath": "packages/datatables-tabletools/swf/copy_csv_xls_pdf.swf"
    
);