DataTables Bootstrap modals ile doğru şekilde başlatılamıyor

Question

DataTables ve Bootstrap modelleriyle iki sorun yaşıyorum.

1. Can değil sayfadan sonra dinamik olarak inşa düğmeleri kullanın 1

(Yuri tarafından çözüldü) Bu tablo, bu bir AJAX isteği ile dinamik olarak inşa edilmiştir gelmiş

, veri doğru şekilde yüklenir ve gerektiği gibi tablo oluşturur, 'Yönet' ve 'Sil' düğmeleri, üzerlerinde ayarlanmış sınıfları vardır, tıklandığında, geçerli olanın üstüne başka bir modal açmalı, tablodaki 1. sayfada iyi, eğer sayfa 2'ye gidersem harekete geçmez Üzerinde hiçbir dinleyici yokmuş gibi bir şey üzerinde.

Ben jQuery altında başka datatables başlatmak zorunda 2 modal üzerinde başlatılıyor değil

datatables (1 sorunu ilgili olabilir)

modalda 'Yönet' butonu açılmalıdır. Açıldığında başka bir DataTable'ı başlatmalı ve AJAX isteğinden veri almalı, ancak Chrome geliştirici araçlarındaki ağ sekmemde çalıştırılmamalı.

Sorun şu ki, DataTables bir nedenden dolayı başlatılamıyor. jQuery oraya çalışır Burada ne yapıyorum anlamadım? Öyle olacak

$('#datatable').on('click', '.btn_class', function(){...}); 

: (sayfada yer)

$(document).ready(function(){ 

     $('.valid-tags').on('click', '.manageAutofixes', function(){ 
      $('.autofixes-modal').modal('show'); 
      $('.autofixes-modal').on('shown.bs.modal', function() { 
      var table = $('.autofixes-table').DataTable({ 
       "ajax": { 
        "url": "/ajax/getValidTags.php", 
        "type": "POST", 
        "data": { 
        ruleID: ruleID, 
        type: 'autofixes' 
        }, 
       }, 
       "columnDefs": [{ 
        "targets": 2, 
        "render": function(data, type, full, meta){ 
         return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>'; 
        } 
       }], 
       destroy: true  
      });   
      })  
     }) 


    }); 

Benim modals HTML

<div class="modal fade autofixes-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static"> 

    <div class="modal-dialog modal-wide"> 

     <div class="modal-content"> 

      <div class="modal-header modal-header-custom"> 
      <input class="ruleID" type="hidden"></input>  
       <button type="button" class="close destroyTable" data-dismiss="modal" aria-hidden="true">x</button> 
       <h4 class="modal-title">Autofixes</h4> 
      </div> 

      <div class="modal-body"> 
      <div class="topBar">      
       <div> 
        <input type="text" class="autofix inputTextStyling">      
       </div> 
      </div> 
      <hr> 
       <table class="table table-striped table-condensed autofixes-table" style="width:100%;"> 
        <thead> 
         <tr> 
          <th>Autofix</th> 
          <th>Manage</th> 
         </tr> 
        </thead> 
        <tbody class="autoFixesTable"> 
        </tbody>      
       </table>       
      </div> 
      <div class="modal-footer">     
       <button type="button" class="btn btn-default destroyTable" data-dismiss="modal">Close</button> 
      </div> 

     </div> 

    </div> 

</div> 

Answer 1

size düğmeleri çözmek için sorun değil, sadece heyetinin bu tür kullanım kapsayıcısında meydana gelen herhangi bir tıklama olayını .btn_class öğelerinde eşleştirin ve wi Dinamik olarak eklenen öğeler için sorununuzu çözeceğim.

Modalınızda Datatable ile ilgili endişeler için genellikle bunu bir uzak mod kullanarak çözüyorum.

$("#myModal").on("show.bs.modal", function(e) { 
    var link = $(e.relatedTarget); 
    $(this).find(".modal-body").load(link.attr("href")); 
}); 

EDIT: Yani sizin <div class="modal-body">..</div> html kodunu ve bağıl JS kodu bir (php) dosyasını (DataTable init için bu kodu) hem koyun ve ile yük anlamına gelir içinde $(document).ready(); kullanmayı unutmayın sizin uzak php dosyası da, bu nedenle kod yalnızca modal gövdesi tam olarak yüklendiğinde çalıştırılacaktır

Answer 2

Sorun, "tıklat" eylemini bağladıktan sonra sayfa 2 için düğmelerin yüklendiği anlamına gelir.Sen

Eğer uzak adresinin modal yük musunuz Datatable seçeneği fnDrawCallback

fnDrawCallback: function(oSettings) { 
    $('.manageAutofixes').on('click', function(){ 
     $('.autofixes-modal').modal('show'); 
     alert('hi'); 
    } 
}