如何在現有數據表中添加表工具？

Question

好的，我有一個使用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添加到我的代碼中，但我只是無法理解文檔，任何人都可以向我指出正確的方向。

感謝大家！

Answer 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

Answer 2

好。

表工具是數據表的插件，需要很多步驟才能使其工作。

我看不到您的標頭，所以我不知道您所包含的內容（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）？

Answer 3

將tabletools swf文件添加到datatable選項，並將datatables js和css文件添加到代碼中

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