jquery 数据表按钮

Question

我在创建自定义按钮和编辑buttons.dom.button 属性时遇到问题。这是我正在使用的代码；

$(document).ready(function() {

function buildTable(tableName) {
   return $('#'+tableName).DataTable( {
        dom: 'ifrt',
        paging: false,
        lengthChange: true,
        responsive: true,
        columnDefs: [
            {
                "targets": [ 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ],
                "visible": false,
                "searchable": false
            },
            { 
                "orderable": false, 
                "targets": [0, 3, 4, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22] 
            }           
        ],

        buttons: [

            'excel',
            {
                extend: 'columnToggle',
                columns: 0,
                text: 'show/hide pics'
            }            
        ],

        buttons: {
           dom: {
              button:{
                 tag: 'li'
              }

           }
        }


    });
}

var tablesMen = buildTable('menTable');

$('#menTable_wrapper').prepend('<div class="dropdown"><button class=btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">dropdown<span class="caret"></span></button><ul class="dropdown-menu"></ul></div>');

tablesMen.buttons().container().appendTo($('.dropdown-menu'));

当我添加按钮时，按钮会重置为默认值（excel、pdf、副本等）

buttons: {
           dom: {
              button:{
                 tag: 'li'
              }

           }
        }

我希望这是有道理的。

Answer 1

你有一个名为“buttons”的数组声明了

buttons: [ 然后立即将其替换为对象buttons: {

EDIT2：这是您的函数，我将其修改为包含dom 属性并添加了一个自定义按钮作为示例：

  function buildTable(tableName) {
    return $('#' + tableName).DataTable({
      dom: 'Bfrtip',
      paging: false,
      lengthChange: true,
      responsive: true,
      columnDefs: [{
        "targets": [1, 2, 3],
        "visible": true,
        "searchable": false
      }, {
        "orderable": false,
        "targets": [0, 4, 5]
      }],
      buttons: {
        dom: {
          button: {
            tag: 'li'
          }
        },
        buttons: [{
          text: 'My button',
          action: function(e, dt, node, config) {
            alert('Button activated');
          }
        }, {
          extend: 'excel',
          text: 'Save current page',
          exportOptions: {
            modifier: {
              page: 'current'
            }
          }
        }]
      }
    });
  }

编辑：请注意，您还缺少字符串中的引号，这是更正的：

$('#menTable_wrapper').prepend('<div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">dropdown<span class="caret"></span></button><ul class="dropdown-menu"></ul></div>');