Question

我使用dynatable.js http://www.dynatable.com/和bootstrap3模式在点击可排序表格中的链接时显示地图。

我正在寻找一些问题的帮助。当我第一次加载页面并单击位置链接时，模态和远程数据显示并正常工作，它正确加载位置的地图。但是，如果我加载页面然后单击其中一列来对表进行排序（例如，我单击项目＃列按项目编号排序），然后单击位置链接，模式显示加载文本但是[data-load-remote] .on（＆＃39; click＆＃39;）根本不会触发。发生这种情况时，我没有收到任何错误或控制台消息。

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

表格

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

引导程序模式

<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集合执行操作，该集合表示填充表的数据。即当您单击以对列进行排序时，Dynatable会对JSON集合进行排序，在这种情况下类似于：

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

然后当它完成排序时，它会重绘表体HTML。所以，可能发生的事情是当它将表体HTML重新绘制到页面中时，它会丢失单元格中的所有属性，包括JavaScript函数与click事件绑定的链接和选择器。

您需要做的是覆盖默认的rowWriter函数，以便在生成表体时使用您想要的格式。

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

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

这样，Dynatable可以从JSON数据中回写表行。

// 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 data-load-remote

1 个答案: