Question

我尝试使用我的datatables表获得一些依赖（级联）下拉列表。应该发生的事情是，从第一个下拉列表中选择后，第二个下拉列表仅填充相关选项。

例如，如果您选择＆＃34; Financial＆＃34;作为第一个下拉列表中的类别，第二个下拉列表中仅提供与财务相关的项目。

以下是我如何绘制表格的信息：

$("#total_datatable").DataTable({  
  "ajax": {   
    "url":"quick_view.php",
    "type":"GET"
}  ,
   "paging":        true, 
  "sDom": '<"top">t<"bottom"><"clear">',
   "pageLength": 50,
"order": [[ 6, "desc" ]],
  "aoColumns": [
 { "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },

 { "bSortable": true,  "width": "20%", "sClass": "lang_body_2", "sTitle": "","visible":false },
  { "bSortable": true, "width": "20%", "sClass": "lang_body_2",  "sTitle": "Category"},
 { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Value" },
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Database",},
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "National Average"},
  { "bSortable": true, "width": "20%","sClass": "lang_body_2 index_num table_index","sTitle": "Index" },
  ],
});
});

数据表呈现并正常工作。以下是我为HTML和下拉列表编写的内容：

HTML：

 <div id="main_grouping_pick" class="col-md-4 col-xs-6" >

 <div id="category_pick" class="col-md-4 col-xs-6">

JS：

var table = $('#total_datatable').DataTable();

$("#main_grouping_pick").each( function ( i ) {
var select = $('<select><option value=""></option></select>')
  .appendTo( $(this).empty() )
  .on( 'change', function () {
    table.column( 1 )
      .search( $(this).val() )
      .draw();

 $("#category_pick").each( function ( i ) {
 var select = $('<select><option value=""></option></select>')
  .appendTo( $(this).empty() )
  .on( 'change', function () {
    table.column( 2)
      .search( $(this).val() )
      .draw();
  } );

  table.column( 2 ).data().unique().sort().each( function ( d, j ) {
   select.append( '<option value="'+d+'">'+d+'</option>' )
  } );
 } );
  } );

  table.column( 1 ).data().unique().sort().each( function ( d, j ) {
  select.append( '<option value="'+d+'">'+d+'</option>' )
 } );
 } );

当我从第一个下拉列表中选择时，会出现第二个下拉列表，但是包含所有可能的类别，而不仅仅是由于第一个下拉列表中发生的过滤而出现在表格中的那些类别。我猜第二个下拉列表是在我使用第一个下拉列表进行过滤之前得到的值，或者我过滤的方式并没有真正使其他类别无法使用。

真的，我不知道。

任何见解都将不胜感激。

Answer 1

我无法弄清楚如何使我的技术发挥作用，但我遇到了一个像数据包一样的插件：

https://github.com/cyberhobo/ColumnFilterWidgets

具有数据表的从属（级联）下拉列表

1 个答案: