twitter-bootstrap 使用数据表和 Bootstrap 模式

Working with dataTables and Bootstrap modal

提问by filistea

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

我有一个dataTable中有200多条记录，其中每行有按钮，删除该记录，当按钮被按下，从一个模式引导弹出。

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.

问题是当我使用 dataTable 中的分页选项更改“页面”时，模态内的信息没有使用相应的 ID 更新。当我点击第一页的任何一行时，它工作正常，但是当我更改页面时，信息被我从第一页按下的最后一个 id 卡住了。

Any ideas?

有任何想法吗？

Mi code looks like this:

Mi 代码如下所示：

<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:

这是我的 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();});

回答by cfs

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 clickevent.

尝试将委托的事件侦听器附加到您的表。当表格最初呈现时，事件处理程序被附加到您的按钮上，但是当您翻阅表格时，这些按钮将被销毁并创建新的按钮。这些新按钮是在分配处理程序后创建的，因此它们不侦听click事件。

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();
});

回答by ErcanE

Here is most general solution Plunker

这是最通用的解决方案 Plunker

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