All geek questions in one place

How can I put the HTML5 CSV button a little higher in the upper right corner of the datatable

In my code below, how can I bring the CSV button in the upper right corner of the data. It is currently located in the upper left corner.

In the code below, there are two types of data that are placed under the common class "myclass". In the JS part, to initialize the parameters of the DataTables, I repeat in the class to build 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>
Run code
+4
source share
2 answers

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>
Run code
+3
source

Dom Positioning.

- :

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

div class= "floatRight", div class= "clear". - CSS, :

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

.

+2

Source: https://habr.com/ru/post/1617437/

More articles:


All Articles