在 jquery 数据表 dom 中添加引导多选？答案

【问题标题】：Add bootsrap multi-select inside jquery databales dom?在 jquery 数据表 dom 中添加引导多选？
【发布时间】：2021-04-03 12:59:37
【问题描述】：

在 jquery datatable dom 中添加引导多选时遇到问题。我正在使用这个 example 在 jquery datatable 容器中添加自定义 dom 元素。它适用于普通的bootstrap select，但是当我尝试添加引导多选时，它无法按预期工作。你可以看下图。

这是我的工作代码

$(this).DataTable({
       "language": (language == "de") ? DTlanguage : false,
       "bSort": false,
       lengthMenu: [
                [25, 50, 100, 500, -1],
                ['25 ' + window.jsTranslations.rows + '', '50 ' + window.jsTranslations.rows + '', '100 ' + window.jsTranslations.rows + '', '500 ' + window.jsTranslations.rows + '', window.jsTranslations.show_all]
            ],
            "dom": '<"toolbar">frtip', // this piece of code is responsible for adding multiselect

            buttons: buttons,
        });
        $("div.toolbar").html(`
            <select class="form-control multiselect document-templates" multiple="multiple" name="document_template[]">
            </select> // this piece of code is responsible for adding multiselect
        `);

【问题讨论】：

需要在渲染回调中进行
能否给个编码例子
这类作品 - 虽然我不确定你需要传递给multiselect 恐怕：jsfiddle.net/annoyingmouse/o7n86qjs

标签： javascript jquery bootstrap-4 datatables

【解决方案1】：

天哪，圣诞节和新年之间的那段时间可能很无聊。在上面添加我的评论并决定试一试之后，我又开始玩这个了。这段代码似乎提供了您需要的东西，但在不知道您的确切用例的情况下我可能是错的：

$(document).ready(function() {
  const example = $('#example').DataTable({
    dom: '<"row"<"col"<"toolbar">><"col"f>>rtip',
    initComplete: function(settings, json) {
      const columns = this.api().columns(2).data().eq(0).sort().unique().toArray()
      const select = $('<select></select>', {
        id: 'example-select',
        multiple: 'multiple'
      })
      columns.forEach(el => select.append($('<option></option>', {
        value: el,
        text: el
      })))
      $('div.toolbar').append(select);
      $('#example-select').multiselect({
        onChange: function() {
          const selected = $('#example-select option:selected').toArray().map(opt => $(opt).val()).join('|')
          example.column(2).search(selected, true, false).draw()
        }
      })
    }
  })
})

不是使用我最初尝试的绘制回调，而是从一开始就开始一切。记下dom 选项，因为它告诉DataTables 添加一个类为row 的div，其中包含多选和常规搜索输入——两者都在类为@ 的div 中987654325@.

我们从位置列中获取唯一值并将它们添加到初始化为多选的选择中。它有一个onChange 事件侦听器，它可以抓取所有选定的选项，并在数据表的正则表达式搜索中使用它们。

这里的工作示例：https://repl.it/@annoyingmouse/Multiselect#script.js

【讨论】：