title: Working with dataTables and Bootstrap modal
body: <p>I have a <strong>dataTable</strong> with 200+ records in which each row there's button to delete that record, when the button is pressed a modal from <strong>Bootstrap</strong> pops up.</p>
  
  <p>The problem is when I change "page" with the pagination option from dataTable the information inside the modal is not being updated with the corresponding ID. When I click in any row from the 1st page it works ok, but when I change page is when the information gets stucked with the last id I pressed from the first page.</p>
  
  <p>Any ideas?</p>
  
  <p>Mi code looks like this:</p>
  
  <pre><code>&lt;table class="table table-bordered table-hover tablewithtooltip" id="dataTable"&gt;
    &lt;thead&gt;
      ...
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;a href="#myModal" role="button" class="btn delete-smt-btn" data-toggle="modal" id="111"&gt;Delete Row&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;Some info&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;a href="#myModal" role="button" class="btn delete-smt-btn" data-toggle="modal" id="112"&gt;Delete Row&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;Some info&lt;/td&gt;
      &lt;/tr&gt;
  
      ...
  
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This is my jQuery:</p>
  
  <pre><code>$('body').on('hidden', '#myModal', function () {
    $(this).removeData('modal');
  });
  
  var table = $('#dataTable').dataTable({
      "sDom": "&lt;'row'&lt;'span6'l&gt;&lt;'span6'f&gt;r&gt;t&lt;'row'&lt;'span6'i&gt;&lt;'span6'p&gt;&gt;",
      "sPaginationType": "bootstrap",
      "aaSorting": [[ 3, "asc" ]],
      "oLanguage": {
          "sLengthMenu": "Mostrar _MENU_ registros por página"
      }
  });
  
  $('.delete-smt-btn').on('click', function(e){
      id = e.currentTarget.id;
      url = "mypage.com/something?p_something=" + id;
  
      $('#myModal').modal({
          remote : url
      });
      $('#myModal').removeData();
  });
  
  // I have some tooltips on my table, and I was having kind of the same issue when
  // I changed pages with dataTable, the tooltip wasnt showing and I solved it with
  // this but I cant make it work with modal.
  
      table.$('[rel="tooltip"], [data-toggle=tooltip]').tooltip({
        html: true
      }).click(function(e) {e.preventDefault();});
  </code></pre>