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

jQuery button style only being applied to buttons in first page of Datatable

本文关键字：按钮 第一页 Datatable 应用于 样式 jQuery      更新时间：2023-09-26

我试着在互联网上搜索类似的问题，但我不知道如何用词。

我有一个数据表，它在多个页面上显示数据。在每一行中，我都有一个类为"opt"的按钮。然后在文档准备功能中，我用以下内容初始化按钮：

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

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

是的，所以这就是我上面提到的情况。

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

是在表中发生更改时触发的函数。

你想做的就是听从harco的建议。您需要添加如下代码片段，我的示例将使用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
} );

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

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

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

Datatable插件有一个事件，该事件在重新绘制表后触发。你应该用它来重新设计你的按钮样式。

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);
相关文章：