So fügen Sie bootstrap "data" attr in Datatabelle Schaltfläche hinzu

Question

Ich möchte von Standard-HTML-Schaltfläche mit einer Datentabelle-Schaltfläche wechseln, wie kann ich das Bootstrap-Attribut data-target in eine Datentabelle-Schaltfläche hinzufügen?

Jede Hilfe ist sehr

Bootstrap-Taste

<button 
    data-toggle="modal" data-target="#create_new_workorder" 
    type="button" class="btn btn-sm btn-warning btn-outline"><span 
    class="hidden-md hidden-sm hidden-xs">Create Workorder</span> <i 
    class="fa fa-fw fa-plus"></i> 
</button> 

Daten-Tabelle Knopf geschätzt:

buttons: [ 
    { 
     text: 'New', 
     action: function() { 
      create_workorder_window(); 
     }, 
     className: 'btn btn-warning btn-outline' 
    }, 
    { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'} 
], 

javascript:

function create_workorder_window() { 
    my_window = window.open("createworkorder", "create_workorder", ",toolbar=0,status=0,width=350,height=900"); 

Modal:

<!--Create Workorder Form Modal --> 
<div class="modal fade " id="create_new_workorder" tabindex="-1" role="dialog" 
    aria-labelledby="TitleLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content modal-workorder"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&#xD7;</span></button> 
       <h4 class="modal-title">Create New Workorder</h4> 
      </div> 
      <form id="create_workorder" method="POST" enctype="multipart/form-data">{% csrf_token %} 
       <div class="modal-body"> 
        {{ workorder_form.as_p }} 
       </div> 
       <div class="modal-footer"> 
        <input class="btn btn-primary" type="submit" 
          value="Create Workorder"/> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel 
        </button> 
       </div> 
      </form> 
     </div> 
    </div> 

Answer 1

Es gibt keine Möglichkeit Attribute noch name oder id auf eine Schaltfläche nativ über die API hinzuzufügen. Die obigen Kommentare sind richtig, aber die vorgeschlagene Lösung in der Verbindung ist viel zu überkochen. Halten Sie es einfach, Sie müssen nicht die API oder die Buttons Instanz einbeziehen. Fügen Sie eine einzigartige Klasse className und reagiert auf das init.dt Ereignis auf die Schaltfläche mit den gewünschten Eigenschaften zu aktualisieren:

$('#example').on('init.dt', function() { 
    $('.my-text-button') 
    .attr('data-toggle', 'modal') 
    .attr('data-target', '#create_new_workorder'); 
}); 

var table = $('#example').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [{ 
    text: 'New', 
    action: function() { 
     create_workorder_window(); 
    }, 
    className: 'btn btn-warning btn-outline my-text-button' 
    }] 
})