如何将 HTML5 按钮 CSV 放在数据表的右上角答案

【问题标题】：How can I put the HTML5 button CSV just above at the top-right corner of the datatable如何将 HTML5 按钮 CSV 放在数据表的右上角
【发布时间】：2026-02-12 02:10:01
【问题描述】：

在下面给出的代码中，如何将 CSV 按钮放在数据表的右上角。目前它位于左上角。

下面的代码有两个数据表，它们放在一个公共类“myclass”下。在 JS 部分，为了初始化 DataTables 设置，我正在迭代类以构造每个数据表。

$(document).ready(function() {
	    
	    $('.myclass').each(function() {
		var id = $(this).attr('id');
	        var table = $(this).DataTable({
		    "dom": 'Bfrtip',
        	    "buttons": [
            		'csvHtml5',
        		] ,
		    
	        });
    		});
		
	});

<link href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src ="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script> 
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>


<div>
<table id="table_1" name="table_1" class="myclass display cell-border compact" cellspacing="0" align = "center" width="100%">
      <thead>
                    <tr  bgcolor= "aliceblue">
                        <th  align=right>Name</th>
                        <th align=right>Place</th>
                        <th align=right>D.O.J</th>
                        <th align=right>Phone</th>
                    </tr>
     </thead>
     <tbody>
                 <tr>
                     <td  align=right>John</td>
                     <td align=right>Bristol</td>
                     <td  align=right>03-09-2015</td>
                     <td align=right>999999</td>
                 </tr>
                 <tr>
                     <td  align=right>Mark</td>
                     <td align=right>Bristol</td>
                     <td  align=right>03-06-2015</td>
                     <td align=right>9999777</td>
                 </tr>
     </tbody>
</table>
<table id="table_2" name="table_2" class="myclass display compact cell-border"  cellspacing="0" align = "center" width="100%">
      <thead>
                    <tr  bgcolor= "aliceblue">
                        <th align=right>Name</th>
                        <th align=right>Place</th>
                        <th align=right>D.O.J</th>
                        <th align=right>Phone</th>
                    </tr>
     </thead>
     <tbody>
                 <tr>
                     <td align=right>Mike</td>
                     <td align=right>Church st.</td>
                     <td  align=right>03-04-2015</td>
                     <td align=right>999900</td>
                 </tr>
                 <tr>
                     <td  align=right>Neil</td>
                     <td align=right>Brussel</td>
                     <td  align=right>06-09-2015</td>
                     <td align=right>955999</td>
                 </tr>
     </tbody>
</table>

</div>

【问题讨论】：

标签： jquery datatables

【解决方案1】：

有很多方法可以定位按钮，但最简单的解决方案是添加以下 CSS 规则：

div.dt-buttons {
    float: right;
    margin-left:10px;
}

$(document).ready(function() {
	    
	    $('.myclass').each(function() {
		var id = $(this).attr('id');
	        var table = $(this).DataTable({
		    "dom": 'Bfrtip',
        	    "buttons": [
            		'csvHtml5',
        		] ,
		    
	        });
    		});
		
	});

<link href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src ="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script> 
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>

<style>
  div.dt-buttons {
   float: right;
   margin-left:10px;
}
</style>

<div>
<table id="table_1" name="table_1" class="myclass display cell-border compact" cellspacing="0" align = "center" width="100%">
      <thead>
                    <tr  bgcolor= "aliceblue">
                        <th  align=right>Name</th>
                        <th align=right>Place</th>
                        <th align=right>D.O.J</th>
                        <th align=right>Phone</th>
                    </tr>
     </thead>
     <tbody>
                 <tr>
                     <td  align=right>John</td>
                     <td align=right>Bristol</td>
                     <td  align=right>03-09-2015</td>
                     <td align=right>999999</td>
                 </tr>
                 <tr>
                     <td  align=right>Mark</td>
                     <td align=right>Bristol</td>
                     <td  align=right>03-06-2015</td>
                     <td align=right>9999777</td>
                 </tr>
     </tbody>
</table>
<table id="table_2" name="table_2" class="myclass display compact cell-border"  cellspacing="0" align = "center" width="100%">
      <thead>
                    <tr  bgcolor= "aliceblue">
                        <th align=right>Name</th>
                        <th align=right>Place</th>
                        <th align=right>D.O.J</th>
                        <th align=right>Phone</th>
                    </tr>
     </thead>
     <tbody>
                 <tr>
                     <td align=right>Mike</td>
                     <td align=right>Church st.</td>
                     <td  align=right>03-04-2015</td>
                     <td align=right>999900</td>
                 </tr>
                 <tr>
                     <td  align=right>Neil</td>
                     <td align=right>Brussel</td>
                     <td  align=right>06-09-2015</td>
                     <td align=right>955999</td>
                 </tr>
     </tbody>
</table>

</div>

【讨论】：

有没有办法通过这个css操作来改变按钮的颜色？我尝试了 background-color:green，但它没有正确改变它？
我将按钮选项更改为："buttons": [ { extend: 'csvHtml5', text: 'Download', className: 'green' }]，并在我的 css 中添加了一个 .green颜色类：绿色。但是，这只是制作按钮文本（基本上是前景色），没有按钮背景色。有什么线索吗？
我得到了答案。谢谢。而不是颜色：绿色，它必须是背景：绿色。

【解决方案2】：

使用Dom Positioning 属性定位按钮的一种方法。

你可以这样做：

var table = $('#example').DataTable({
    dom: '<"floatRight"B><"clear">frtip',
    buttons: ['csvHtml5']
});

这将创建一个 class="floatRight" 的 div，然后创建另一个 class="clear" 的 div。然后在你的 CSS 中添加一些简单的东西，例如：

.floatRight{
  float:right;
}
.clear{
  clear:both;
}

可以达到你想要的效果。

另请参阅working fiidle

【讨论】：

这行得通！我进一步尝试并找到了一种将按钮文本自定义为“按钮”的方法：[ { extend: 'csvHtml5', text: 'Download' }],