Wie kann ich den HTML5-button-CSV, nur oben an der oberen rechten Ecke des datatable

In meinem code unten angegeben, wie kann ich die CSV-Schaltfläche in der oberen rechten Ecke der datatable. Derzeit befindet es sich an der oberen linken Ecke.

Den code unten ist mit zwei datatables, die unter eine gemeinsame Klasse 'MeineKlasse'. In der JS Teil, zum initialisieren der DataTables-Einstellungen, bin ich überarbeiten, die Klasse zu konstruieren jede datatable.

JS:

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

HTML:

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

InformationsquelleAutor H.Burns | 2015-11-25

datatables jquery

Gibt es viele Möglichkeiten, um die position-Tasten, aber die einfachste Lösung wäre, fügen Sie die folgende CSS-Regel:

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

JS:

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

HTML:

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

gibt es eine Möglichkeit, ändern Sie die Farbe der Schaltfläche über diese css-manipulation ? Ich habe versucht background-color:grün, aber es ist nicht zu ändern, es richtig?
Ich habe die Taste option als diese : "buttons": [ { extend: 'csvHtml5', text: 'Download', className: 'grün' }], und in meiner css Hinzugefügt .grüne Klasse mit Farbe:grün. Dies ist jedoch nur der button-text (Vordergrundfarbe im Grunde), ohne die Taste backgound Farbe. Keine Ahnung ?
Bekam ich die Antwort. danke. anstelle von Farbe:grün, es werden hintergrund:grün.

InformationsquelleAutor Gyrocode.com

4

Einer Weise zu positionieren Schaltflächen mit der Dom-Positionierung Eigenschaft.

Können Sie etwas wie das hier tun:
```
var table = $('#example').DataTable({
    dom: '<"floatRight"B><"clear">frtip',
    buttons: ['csvHtml5']
});
```
Dadurch wird ein div mit class="floatRight" und als Nächstes dann ein weiteres div mit der class="clear". Und dann fügen Sie einfach etwas in Ihrem CSS wie:
```
.floatRight{
  float:right;
}
.clear{
  clear:both;
}
```
können Sie den gewünschten Effekt erzielen.

Siehe auch diese arbeiten fiidle
- Das funktionierte ! Ich probierte weiter und fand heraus, eine Möglichkeit zum anpassen der button-text als "buttons": [ { extend: 'csvHtml5', text: 'Download' }],
InformationsquelleAutor MaVRoSCy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.