在 jquery databales dom 中添加 bootsrap 多选？

如何解决在 jquery databales dom 中添加 bootsrap 多选？

我在 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
        `);

解决方法

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

$(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 中col 的类。

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

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