Working with dataTables and Bootstrap modal

Question

I have a dataTable with 200+ records in which each row there's button to delete that record, when the button is pressed a modal from Bootstrap pops up.

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.

Any ideas?

Mi code looks like this:

<table class="table table-bordered table-hover tablewithtooltip" id="dataTable">
  <thead>
    ...
  </thead>

  <tbody>
    <tr>
      <td>
        <a href="#myModal" role="button" class="btn delete-smt-btn" data-toggle="modal" id="111">Delete Row</a>
      </td>
      <td>Some info</td>
    </tr>

    <tr>
      <td>
        <a href="#myModal" role="button" class="btn delete-smt-btn" data-toggle="modal" id="112">Delete Row</a>
      </td>
      <td>Some info</td>
    </tr>

    ...

  </tbody>
</table>

This is my jQuery:

$('body').on('hidden', '#myModal', function () {
  $(this).removeData('modal');
});

var table = $('#dataTable').dataTable({
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
    "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();});

colestrode · Accepted Answer · 2013-06-26 17:52:19Z

Try attaching a delegated event listener to your table. The event handler is being attached to your buttons when the table initially renders, however when you page through the table, those buttons are destroyed and new ones are created. These new buttons are created after the handler was assigned, so they aren't listening for the click event.

It's also best practice to use delegated event listeners for cases like this where you have many elements firing the same function on the same event. Delegated events only assign one handler, otherwise you are assigning one handler per element, which will impact memory/performance

$('#dataTable').on('click', '.delete-smt-btn', function(e){
    id = e.currentTarget.id;
    url = "mypage.com/something?p_something=" + id;

    $('#myModal').modal({
        remote : url
    });
    $('#myModal').removeData();
});

ErcanE · Accepted Answer · 2015-03-07 14:44:09Z

0

Here is most general solution Plunker

$('#myModal').on('hidden', function () {
  $(this).removeData('modal');
});

answered Mar 7, 2015 at 14:44

ErcanE

1,6513 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Working with dataTables and Bootstrap modal

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related