2012-11-27 11 views
2

열 필터에서 여러 항목을 선택하고 싶습니다. 다음 예제는 드롭 다운을 사용하여 열을 필터링 할 수 있습니다 :Datatables 다중 선택 열 필터

http://datatables.net/release-datatables/examples/api/multi_filter_select.html

그러나, 나는 아마도 드롭 다운의 각 항목 옆에 체크 박스와 열 필터에서 여러 항목을 선택할 수 있도록하고 싶습니다. 예 : 예를 들어, 나는 'CSS 등급'에 대해 'A'와 'C'를 표기하여 이러한 등급 만 표에 표시되도록합니다.

DataTables 플러그인을 사용하거나 다른 방법으로 다중 선택 열 필터를 얻으려면 어떻게해야합니까?

답변

0

선택 목록, 확인란 등으로 필터 div를 구성하고 fnFilter을 사용하여 필터링 된 데이터를 서버에 요청할 수 있습니다.

$("#mycheckbox").click(function() { 
    var dt = $('#mytable').dataTable({ "bRetrieve": true }); 
    dt.fnFilter($("#mycheckbox").is(':checked'), 1); 
}); 

게시물 : 예를 들어

sSearch_1 : true/false 
+0

안녕, 내가 가진 수있는 빠른 바이올린을하려고? – Jaskey

0

그것은 여러 번 다양한 방법으로 질문, 정말 쉽습니다 -하지만 놀랍게도 내가 정확히 일치를 찾을 수 없습니다. 당신이있는 경우 컬럼에 해당하는 :

<select class="form-control" id="ddlSearch"> 
    <option value="0">Name</option> 
    <option value="1">Position</option> 
    <option value="2">Office</option> 
    <option value="3">Age</option> 
    <option value="4">Start date</option> 
    <option value="5">Salary</option> 
</select> 

후 별도의 열 VAR 테이블에 seacrh를 얻을이 자바 스크립트를 구현;

$(document).ready(function() { 
    table = $('#example').DataTable({ 
     pageLength: 100, 
     dom: 'lrtip', 
    }); 
    var column_no = 0; 
    $('#ddlSearch').on('change',function(){ 
     column_no = Number($(this).val()); 
    }); 

    $('#txtSearch').on('input', function() { 
     if (table.columns([column_no]).search() !== $('#txtSearch').val()) { 
      table.columns([column_no]).search($('#txtSearch').val()).draw(); 
     } 
    }); 
}); 

예를 들어이이 https://jsfiddle.net/07rnpgs1/

모든 최고의