2017-09-04 8 views
2

サーバからいくつかのデータがサーバにロードされ、サーバ側でフィルタリングするためにyadcfを持つDataTableにajaxを提供するテーブルがあります。カラムの1つにselect2ボックスがあり、これは(サーバからロードされた)事前定義されたオプションだけを表示したい(例えば、jsfiddleの場合はopt変数)ですが、select2のオプションにはデータも含まれています。列データの追加を無効にする方法と、サーバーオプションからのみロードする方法はありますか?YADCF select - カスタムオプション付き

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, 
    } 
    }, 
]); 

答えて

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

関連する問題