Как загрузить удаленный modal после вызова Datatable Ajax

Question

Как бы добавить обработчик события в этот код. Я хочу, чтобы в каждой строке был удален удаленный бутстрап, открытый для каждой строки, . В результате текущего результата datatables не запускается jquery, чтобы открыть удаленный модальный.

// Выходные данные

<table id="users" cellspacing="0" border="0" 
    class="table table table-condensed sortable table-striped table-bordered datatables dataTable no-footer" 
    role="grid" aria-describedby="users_info" style="width: 1129px;"> 
<thead> 
<tr role="row"> 
    <th class="col-md-3 sorting_asc" tabindex="0" aria-controls="users" rowspan="1" colspan="1" 
     style="width: 243px;" aria-sort="ascending" aria-label="User ID: activate to sort column ascending">User ID 
    </th> 
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 250px;" 
     aria-label="User Name: activate to sort column ascending">User Name 
    </th> 
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 250px;" 
     aria-label="Email: activate to sort column ascending">Email 
    </th> 
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 246px;" 
     aria-label="Created At: activate to sort column ascending">Created At 
    </th> 
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 79px;" 
     aria-label="table.actions: activate to sort column ascending">table.actions 
    </th> 
</tr> 
</thead> 

<tbody> 

<tr role="row" class="odd"> 
    <td class="sorting_1">1</td> 
    <td>jess</td> 
    <td>jess@example.com</td> 
    <td>2016-01-24 19:47:26</td> 
    <td><a href="#affiliateInfoModal" role="button" class="btn" data-toggle="modal" 
      data-load-remote="/get_affiliate_profile/1" data-remote-target="#affiliateInfoModal .modal-body"><i 
        class="fa fa-info fa-lg"></i></a></td> 
</tr> 
</tbody> 

<!-- Modal --> 
<div class="modal fade" id="affiliateInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
    aria-hidden="true"> 
    <div class="modal-dialog-affiliate-info"> 
     <div class="modal-content"> 

      <div class="modal-body"> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

// DataTables сценарий и удаленного загрузчика Модальные

<script type="text/javascript"> 
     $(document).ready(function() { 
      oTable = $('#users').DataTable({ 
       "processing": true, 
       "serverSide": true, 
       "ajax": "/testdata22", 
       "columns": [ 
        {data: 'id', name: 'id', sorttable: true}, 
        {data: 'username', name: 'username' , sorttable: true}, 
        {data: 'email', name: 'email' , sorttable: true}, 
        {data: 'created_at', name: 'created_at', sorttable: true}, 
        {data: 'actions', name: 'actions', searchable: false} 
       ] 
      }); 
     }); 
    </script> 




    <script> 
     $('[data-toggle="modal-affiliate-info"]').click(function (e) { 
      e.preventDefault(); 
      var url = $(this).attr('href'); 
      //var modal_id = $(this).attr('data-target'); 
      $.get(url, function (data) { 
       $(data).modal(); 
      }); 
     }); 
    </script> 

Answer 1

Это зависит от того, какая версия DataTables вы используете. Если вы используете устаревшую версию (< 1.10), используйте fnInitComplete, в противном случае (> 1.10) используйте initComplete.

Например (версия < 1,10):

$(document).ready(function() { 
     oTable = $('#users').DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax": "/testdata22", 
      "columns": [ 
       {data: 'id', name: 'id', sorttable: true}, 
       {data: 'username', name: 'username' , sorttable: true}, 
       {data: 'email', name: 'email' , sorttable: true}, 
       {data: 'created_at', name: 'created_at', sorttable: true}, 
       {data: 'actions', name: 'actions', searchable: false} 
      ], 
      "fnDrawCallback": function(oSettings){ 
       clickable(); 
      } 
     }); 
    }); 

function clickable(){ 
    $('[data-toggle="modal-affiliate-info"]').click(function (e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     //var modal_id = $(this).attr('data-target'); 
     $.get(url, function (data) { 
      $(data).modal(); 
     }); 
    }); 
} 

Я использую очень подобную установку, и она работает без сучка и задоринки.