javascript - 在按钮集合中添加自定义按钮

Question

我想在.buttons-collection下添加自定义按钮。请参阅下面的快照和示例。

buttons: [{extend : 'collection',
                         text : '<i class="fa fa-bars"></i>',
                         buttons : [ 'copy', 'csv', 'excel', 'pdf', 'print']}]

按钮应命名为“报告问题”。通过单击按钮，它应该运行下面的 JS（带有表名）。此代码发送带有问题描述的电子邮件（与表格相关的问题） -

   onclick=JS("function() {
$(location).attr('href', 'mailto:xxx.com?subject='
              + encodeURIComponent('Issue on Table' + this.table.name)
              + '&body=' 
              + encodeURIComponent('Please check issue on table ' + '\"' + this.table.name + '\"'));
    }

标签： javascriptdatatables

Answer 1

假设您有<table>一个 IDmyTable和名称Your Name Here（仅作为占位符）的，您可以使用以下内容：

$(document).ready(function() {

  $('#myTable').DataTable( {
    dom: 'Bfrtip',
    buttons: [
      { extend : 'collection',
        text : '<i class="fa fa-bars">buttons</i>',
        buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print',
          {
            text: 'Report Issue',
            action: function ( e, dt, node, config ) {
              reportIssue(e, dt, node, config);
            }
          }
        ]
      }]
  } );

  // e - the button click event
  // dt - the datatable object
  // node - button node
  // config - the button's config (e.g. 'text')
  function reportIssue(e, dt, node, config) {    
    var tableName = $('#myTable').attr('name');
    alert( 'The "' + config.text + '" button was clicked\n' 
        + 'for the "' + tableName + '" table.' );
  }

});

解决方案的核心是这部分，其中声明了自定义按钮：

{
  text: 'Report Issue',
  action: function ( e, dt, node, config ) {
    reportIssue(e, dt, node, config);
  }
}

注意事项：

我在主按钮上添加了“按钮”一词，以使其不为空：

当您单击它时，您会看到以下按钮集：

之后，由您决定添加到reportIssue()函数中的内容。您可能不需要传递给它的任何变量。可能不是，基于问题中的示例 JS（我使用了警报，仅用于测试）。