1

내 datatables 테이블에서 종속적 인 (계단식) 드롭 다운을 얻으려고합니다. 첫 번째 드롭 다운에서 선택하면 두 번째 드롭 다운에 관련 옵션 만 표시됩니다.데이터 테이블의 종속 (계단식) 드롭 다운

예를 들어 첫 번째 드롭 다운에서 카테고리로 '금융'을 선택하면 두 번째 드롭 다운에서 금융 관련 항목 만 사용할 수 있습니다. 여기

내가 테이블을 그리기 해요 방법은 다음과 같습니다

$("#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" }, 
    ], 
}); 
}); 

DataTable에는 렌더링하고 잘 작동합니다.

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 : 여기가 드롭 다운에 대한 HTML 및 스크립트를 위해 노력했다입니다

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>') 
}); 
}); 

어떤 일이 것은 내가 처음의 메뉴에서 선택이다, 두 번째 드롭 다운 나타납니다. 그러나 첫 번째 드롭 다운에서 발생한 필터링으로 인해 테이블에있는 카테고리뿐만 아니라 가능한 모든 카테고리가 포함됩니다. 나는 첫 번째 드롭 다운으로 필터링하기 전에 두 번째 드롭 다운 값을 가져 오는 것 같아요 또는 내가 필터링하는 방식으로 정말 다른 범주를 사용할 수 없게 만들지 않습니다.

그래도 나는 잘 모른다.

어떤 통찰력도 인정 될 것입니다.

답변