Question

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

下面的代码有两个数据表，这些数据表放在一个共同的类＆＃39; myclass＆＃39;中。在JS部分中，为了初始化DataTables设置，我正在迭代类来构造每个数据表。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

您可以这样做：

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

这将创建一个div，其中class =＆＃34; floatRight＆＃34;接下来另一个div与class =＆＃34; clear＆＃34;。然后在CSS中附加简单的内容，例如：

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

你可以达到预期的效果。

另见working fiidle

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

2 个答案: