Question

我想从使用带有数据表按钮的标准HTML按钮切换，如何添加引导程序data-toogle＆amp; data-target属性到数据表按钮？

非常感谢任何帮助

Bootstrap按钮

<button
    data-toggle="modal" data-target="#create_new_workorder"
    type="button" class="btn btn-sm btn-warning btn-outline"><span
    class="hidden-md hidden-sm hidden-xs">Create Workorder</span> <i
    class="fa fa-fw fa-plus"></i>
</button>

数据表按钮：

buttons: [
    {
        text: 'New',
        action: function () {
            create_workorder_window();
        },
        className: 'btn btn-warning btn-outline'
    },
    { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'}
],

javascript：

function create_workorder_window() {
    my_window = window.open("createworkorder", "create_workorder", ",toolbar=0,status=0,width=350,height=900");

模态：

<!--Create Workorder Form Modal -->
<div class="modal fade " id="create_new_workorder" tabindex="-1" role="dialog"
     aria-labelledby="TitleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-workorder">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&#xD7;</span></button>
                <h4 class="modal-title">Create New Workorder</h4>
            </div>
            <form id="create_workorder" method="POST" enctype="multipart/form-data">{% csrf_token %}
                <div class="modal-body">
                   {{ workorder_form.as_p }}
                </div>
                <div class="modal-footer">
                    <input class="btn btn-primary" type="submit"
                           value="Create Workorder"/>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

Answer 1

无法通过API本机地在按钮上添加属性或name或id。上面的评论是正确的，但链接中建议的解决方案过于繁琐。保持简单，您真的不必涉及API或Buttons实例。向className添加一个唯一的类并响应init.dt事件以更新具有所需属性的按钮：

$('#example').on('init.dt', function() {
   $('.my-text-button') 
     .attr('data-toggle', 'modal')
     .attr('data-target', '#create_new_workorder');  
});

var table = $('#example').DataTable( {
  dom: 'Bfrtip',
  buttons: [{
     text: 'New',
     action: function () {
       create_workorder_window();
     },
     className: 'btn btn-warning btn-outline my-text-button'
  }]
})

Answer 2

$('#myTable').DataTable( {
  buttons: [
    {
      extend: 'copyHtml5',
      attr:  {
        title: 'Copy',
        id: 'copyButton'
      }
    }
  ]
} );

https://datatables.net/reference/option/buttons.buttons.attr

我认为可以做到这一点。

如何将bootstrap“data-”attr添加到数据表按钮

2 个答案: