在下面给出的代码中，如何将 CSV 按钮放在数据表的右上角。目前它位于左上角。
下面的代码有两个数据表，它们位于公共(public)类“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>最佳答案
定位按钮的方法有很多，但最简单的解决方案是添加以下 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>关于jquery - 如何将 HTML5 按钮 CSV 放在数据表右上角的上方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33916638/