bootstrap table 排序后未触发数据加载远程

Question

我正在使用 dynatable.js http://www.dynatable.com/ 和 bootstrap3 模态来在单击 sortable table 中的 link 时显示地图。

我正在寻求有关此问题的帮助。当我第一次加载页面并单击位置 link 时，模态和远程数据显示并正常工作，它正确加载了该位置的地图。但是，如果我加载页面，然后单击其中一列对 table 进行排序（例如，我单击 item# 列以按项目编号排序），然后单击位置 link，模态显示加载文本，但 [data-load-remote].on('click') 根本不会触发。发生这种情况时，我也没有收到任何错误或控制台消息。

只有对列进行排序时才会发生这种情况。如果我加载页面并且不点击对列进行排序，一切正常。

Table

<table id="inventory-table" class="table">
<thead>
    <tr>
     <th>Item #</th>
     <th class="hidden-xs">Location</th>
    </tr>
</thead>
<tbody>
<tr>
 <td>1234</td>
 <td><a href="#myModal" role="button" data-toggle="modal" data-load-remote="/item-location/4" data-remote-target="#myModal . modal-body">555 W. Test St.</a></td>
</tr>
</tbody>
</table>

Bootstrap 模态

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body bg-gray-lighter">
            <p>Loading...</p>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
$( document ).ready(function() {
    $('#inventory-table').dynatable({
    dataset: {
        perPageDefault: 20,
        perPageOptions: [20, 30, 50, 100]
    }
    });

   $('[data-load-remote]').on('click',function(e) {
       e.preventDefault();
       var $this = $(this);
       var remote = $this.data('load-remote');

       if(remote) {
           $($this.data('remote-target')).load(remote);
       }

       $(".modal-body").html('<p>Loading...</p>');
  });

  $('#dynatable-query-search-inventory-table').addClass('form-control');
  $('#dynatable-per-page-inventory-table').addClass('form-control selectperpage');</script>

Answer 1

Dynatable 的工作方式是对 JSON 集合执行操作，该集合表示 table 填充的数据。 IE。当您单击对列进行排序时，Dynatable 会对 JSON 集合进行排序，在本例中类似于：

["item-#": 1234, "location": "555 W. Test St."]

然后在完成排序后，它会重新绘制 table 正文 HTML。因此，可能发生的情况是，当它将 table 正文 HTML 重绘到页面中时，它会丢失单元格中的所有属性，包括 link 和 [=31= 选择器] ] 函数与点击事件绑定。

您需要做的是覆盖默认的 rowWriter 函数以在生成 table 正文时使用您想要的格式。

另请注意，您的行需要的信息不在它自己的列中（data-load-remote 中的 link），因此 Dynatable 不会自动选择它了。因此，您还需要自己的 rowReader 函数来获取它并将其存储在 JSON 对象中，这样它看起来像这样：

["item-#": 1234, "location": "555 W. Test St.", "link": "/item-location/4"]

这样 Dynatable 可以从 JSON 数据写回 table 行。

// Function that renders the table rows from our records
function myRowWriter(rowIndex, record, columns, cellWriter) {
  var row = '<td>' + record["item-#"] + '</td><td><a href="#myModal" role="button" data-toggle="modal" data-load-remote="' + record.link + '" data-remote-target="#myModal . modal-body">' + record.location + '</a></td>';
  return row;
}

// Function that creates our records from the table when the page is loaded
function myRowReader(index, row, record) {
  var $row = $(row);
  record.link = $row.find('[data-load-remote]').text();
}

$('#inventory-table').dynatable({
  dataset: {
    perPageDefault: 20,
    perPageOptions: [20, 30, 50, 100]
  },
  writers: {
    _rowWriter: myRowWriter
  },
  readers: {
    _rowReader: myRowReader
  }
});

查看 Rendering section of the docs 了解更多信息。

bootstrap table 排序后未触发数据加载远程

bootstrap data-load-remote not triggered after table sorted

html

sorting

jquery

twitter-bootstrap

dynatable