Question

我有一个 dataTable ，有200多条记录，其中每一行都有按钮删除该记录，当按下按钮时会弹出 Bootstrap 模式。

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

有什么想法吗？

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>

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

Answer 1

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

对于这样的情况，使用委托事件侦听器也是最佳做法，在这种情况下，您有许多元素在同一事件上触发相同的功能。委托事件只分配一个处理程序，否则您将为每个元素分配一个处理程序，这将影响内存/性能

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

Answer 2

这是最通用的解决方案 Plunker

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

使用dataTables和Bootstrap模式

2 个答案: