3

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

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

有任何想法吗？

小米代码如下：

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

2 回答 2

5

尝试将委托的事件侦听器附加到您的表。当表格最初呈现时，事件处理程序被附加到您的按钮，但是当您翻阅表格时，这些按钮被销毁并创建新按钮。这些新按钮是在分配处理程序后创建的，因此它们不会监听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();
});
于 2013-06-26T17:52:19.700 回答
0

这是最通用的解决方案 Plunker

$('#myModal').on('hidden', function () {
  $(this).removeData('modal');
});
于 2015-03-07T14:44:09.767 回答