How can I put the HTML5 button CSV just above at the top-right corner of the datatable

Question

In my code given below, how can I bring the CSV button at the top-right corner of the datatable. Currently it is located at the top-left corner.

The code below, is having two datatables which are put under a common class 'myclass'. In the JS part, to initialize the DataTables settings, I am iterating on the class to construct each datatable.

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

Answer 1

There are many ways to position buttons, but the simplest solution would be to add the following CSS rule:

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>