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