javascript 数据表完成渲染后触发事件

Fire event after datatables table finishes rendering

提问by AnneMz

I am using datatables and fetching the data from an ajax URL. Each row of my returned table data includes a field that renders a button that looks like this:

我正在使用数据表并从 ajax URL 获取数据。我返回的表数据的每一行都包含一个字段，该字段呈现一个如下所示的按钮：

<button type="button" data-catid="8" data-catname="Programming:JavaScript"></button>

The values assigned data-catid and data-catname come from the datatables retrieved data.

分配给 data-catid 和 data-catname 的值来自数据表检索到的数据。

In certain cases, when the table finishes loading, I want to trigger a click on one of these buttons. My code for that is this:

在某些情况下，当表格完成加载时，我想触发对这些按钮之一的单击。我的代码是这样的：

$('#mydatatable').find('button[data-catid="9"]').trigger('click');

However, I cannot find a way to do this so that it occurs after the table has rendered and the button exists in the dom so I can find it and trigger the click.

但是，我无法找到一种方法来执行此操作，因此它会在表格呈现并且按钮存在于 dom 之后发生，因此我可以找到它并触发单击。

I have tried drawCallback and initComplete but neither of those is triggered after the button has actually been added to the dom, allowing me to find it with jquery.

我已经尝试过 drawCallback 和 initComplete，但是在按钮实际添加到 dom 后，这两个都没有被触发，让我可以用 jquery 找到它。

Is there a way I can do this? i.e. trigger my click after the mytable has finished retrieving its data via ajax and rendered it?

有没有办法做到这一点？即在 mytable 完成通过 ajax 检索其数据并呈现后触发我的点击？

I am using datatables v 1.10

我正在使用数据表 v 1.10

EDIT: Here is how my click event handler is attached to the summary table.

编辑：这是我的点击事件处理程序如何附加到汇总表。

var selectedCat = 0;
$('#mydatatable :button').click(function () {
    selectedCat = this.getAttribute("data-catId");
    console.log("selecteCat is " + selectedCat);
    qDetailTable.ajax.url('/datatables/question-data/' + selectedCat).load();
    var selectedCatName = this.getAttribute("data-catName");
    $('#questDetailCat').text('Questions about: ' + selectedCatName);
    $('#questSummary').hide();
    $('#questDetail').show();
});

回答by Gyrocode.com

• Move the click handler into a separate function, for example:

  var selectedCat = 0;
  function OnCategoryClick(btn){
      selectedCat = btn.getAttribute("data-catId");
      console.log("selecteCat is " + selectedCat);
      qDetailTable.ajax.url('/datatables/question-data/' + selectedCat).load();
      var selectedCatName = btn.getAttribute("data-catName");
      $('#questDetailCat').text('Questions about: ' + selectedCatName);
      $('#questSummary').hide();
      $('#questDetail').show();
  });
  

  Event handler needs to be in a named function because you will not be able to trigger click event for elements that are not in DOM as with jQuery DataTables.

• Change how you attach your click handler.

  $('#mydatatable').on('click', 'button', function () {
      OnCategoryClick(this); 
  });
  

  Remember to always use delegated event handlers with elements inside jQuery DataTables because elements for pages other than first will not be available in DOM. See jQuery DataTables – Why click event handler does not workfor more details.

• Use $()API method to locate required button and call your handler function OnCategoryClick().

  var btn = $('#datatable-summary').DataTable().$('button[data-catid="9"]').get(0);         
  OnCategoryClick(btn);
  

  Replace datatable-summarywith your actual ID of the summary table.

  If you need to update details as soon as the summary table is initialized and drawn, use initCompleteoption to define a callback and do it there.

• 将点击处理程序移动到一个单独的函数中，例如：

  var selectedCat = 0;
  function OnCategoryClick(btn){
      selectedCat = btn.getAttribute("data-catId");
      console.log("selecteCat is " + selectedCat);
      qDetailTable.ajax.url('/datatables/question-data/' + selectedCat).load();
      var selectedCatName = btn.getAttribute("data-catName");
      $('#questDetailCat').text('Questions about: ' + selectedCatName);
      $('#questSummary').hide();
      $('#questDetail').show();
  });
  

  事件处理程序需要在命名函数中，因为您将无法像 jQuery DataTables 那样为不在 DOM 中的元素触发单击事件。

• 更改附加点击处理程序的方式。

  $('#mydatatable').on('click', 'button', function () {
      OnCategoryClick(this); 
  });
  

  请记住始终将委托的事件处理程序与 jQuery DataTables 中的元素一起使用，因为除了 first 之外的页面元素在 DOM 中将不可用。有关更多详细信息，请参阅jQuery DataTables – 为什么单击事件处理程序不起作用。

• 使用$()API 方法定位所需的按钮并调用您的处理程序函数OnCategoryClick()。

  var btn = $('#datatable-summary').DataTable().$('button[data-catid="9"]').get(0);         
  OnCategoryClick(btn);
  

  替换datatable-summary为汇总表的实际 ID。

  如果您需要在汇总表初始化和绘制后立即更新详细信息，请使用initCompleteoption 定义回调并在那里进行。