jQuery 按钮样式仅适用于 Datatable 第一页中的按钮

Question

我试图在互联网上搜索类似的问题，但我不知道如何措辞。

我有一个Datatable，它在多个页面上显示数据。在每一行中，我都有一个带有“选择”类的按钮。然后在文档准备功能中，我使用以下内容初始化按钮：

$(function() {
    $( ".opt" ).button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
});

然而，当我加载页面时，这个 jQuery 样式只应用于第一页上的按钮。另一页上的按钮显示为普通按钮。感谢您的任何建议。

Answer 1

是的，就像我上面提到的那样。

// Re-draws the table on update.
table.draw();

是表有变化时触发的函数。

你想做的就是听从 harco 的建议。 您需要添加如下代码的 sn-p，我的示例将使用 Jquery。

// On every pagination click
// paginate_button is a class given to the pagination buttons in the datatable.
$('.paginate_button').click(function(){

   // You might have to add a setTimeout function 
   // here to make sure the datatable is done loading.

   $( ".opt" ).button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
});

关于数据表事件http://www.datatables.net/manual/events的信息

这是您应该尝试的，如数据表页面所示。​​

var table = $('#example').DataTable();

table.on( 'draw', function () {
    // your code here
} );

这将在重新绘制的更新数据表上设置您的函数。

希望这是一个很好的例子和解释

Answer 2

您应该确保代码在每个页面加载后运行。只有在加载初始文档（带有第一页数据）时才调用文档就绪函数。当您向数据表添加新数据时，您应该浏览所有新添加的带有“.opt”类的元素，并将它们转换为样式按钮。

Datatable 插件有一个event，在重绘表格后触发。您应该使用它来重新设置按钮样式。

function initButtons() {
    $( ".opt" ).button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
}

// Document ready
$(function() {
  initButtons();
});

// Assuming "table" is the variable name of your datatable
table.on('draw', initButtons);