如何将引导程序“数据-”属性添加到数据表按钮中答案

【问题标题】：How to add bootstrap "data-" attr into data-table button如何将引导程序“数据-”属性添加到数据表按钮中
【发布时间】：2017-06-09 03:06:08
【问题描述】：

我想从使用标准 HTML 按钮和数据表按钮切换，如何将引导程序 data-toogle 和 data-target 属性添加到数据表按钮中？

非常感谢任何帮助

引导按钮

<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>

【问题讨论】：

我认为没有添加自定义属性的选项。您必须在初始化数据表后使用 jquery 来执行此操作
你能告诉我怎么做吗？
勾选这个datatables.net/forums/discussion/36085/…你必须在数据表初始化后添加属性
非常感谢@XYZ 之前发现了这个讨论，但我无法理解它，但会继续阅读它
或者，如果可能的话，也许你可以帮助我，谢谢。

标签： javascript jquery html twitter-bootstrap datatables-1.10

【解决方案1】：

无法通过 API 在按钮上添加属性或 name 或 id。上面的 cmets 是正确的，但是链接中建议的解决方案太煮熟了。保持简单，您真的不必涉及 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'
  }]
})

【讨论】：

您可以考虑使用 data 而不是 attr 以使其更简单。
@Shiffty，是的，这么简单它不会起作用:) 你有没有试过......？这是一个常见的误解。 Bootstrap 内部不使用data()，因此使用data() 将不起作用。它只能获取 data-* 值。自己试试 -> jsfiddle.net/sLgofw7x
@Shiffty，不，这是个好建议，很多人认为data()可以使用，我曾经也是。实际上在rejected pull requests中已经提出了-> github.com/twbs/bootstrap/pull/11100 data()不是data-*属性抽象，而是jQuery提供的一种存储介质。 data() 实际上并没有在元素上设置 data- 值。
抱歉回复晚了，但非常感谢@davidkonrad，这项工作！

【解决方案2】：

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

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

我认为有一种方法可以做到这一点。

【讨论】：