YADCF 选择 - 带有自定义选项答案

【问题标题】：YADCF select - with custom optionsYADCF 选择 - 带有自定义选项
【发布时间】：2018-02-12 07:05:52
【问题描述】：

有一个表，其中包含通过提供的 ajax 从服务器加载到 DataTable 的一些数据，还有 yadcf 用于在服务器端进行过滤。在其中一列中，我有 select2 框，在我只想看到预定义（从服务器加载）选项（在 jsfiddle 上的示例中，它是 opt 变量），但 select2 中的选项也包含来自列的数据。我如何禁用添加列数据，并仅从服务器选项加载？

https://jsfiddle.net/6ssh8mg4/

代码：

 var opts = [{id:0, text:"Some 1"},{id:1, text:"Some 2"}];
 var table = $("#docTable").DataTable({
            processing: true,
            serverSide: false,
            paging: true,
            ordering: true,
            deferRender: true,
            pageLength: 10,
            lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
            columns: [
               { "data": "Identifier", className: "nowrap" },
               { "data": "Name" },
            ]
 });

yadcf.init(table, [
  { column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
  {
    column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
    select_type_options: {
      data: opts,
      width: '180px',
      dropdownAutoWidth: true,
    }
  },
]);

【问题讨论】：

标签： datatables jquery-select2 yadcf

【解决方案1】：

您应该使用 data 属性（在您的情况下使用数据/标签属性），阅读文档

这是一个工作示例

var opts = [{value:0, label:"Some 1"},{value:1, label:"Some 2"}];
var table = $("#docTable").DataTable({
    processing: true,
    serverSide: false,
    paging: true,
    ordering: true,
    deferRender: true,
    pageLength: 10,
    lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
    columns: [
       { "data": "Identifier", className: "nowrap" },
       { "data": "Name" },
    ]
 });

yadcf.init(table, [
    { 
    column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
    {
        data: opts,
        column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
        select_type_options: {
            width: '180px',
            dropdownAutoWidth: true,
        }
    },
]);

jsfiddle

【讨论】：