2016-07-14 7 views
1

나는 데이터 테이블에서 행을 숨기려면 도움이 필요, 그렇지 않으면
DataTable을 숨기기 행

사용자가 "미국 숨기기"를 선택합니다.,
은 국가 열의 값이 "USA"인 행을 숨 깁니다.
따라서 열의 값에 따라 Datatable의 숨기기/표시 토글 기능이 필요합니다.

여기 내 샘플 코드입니다 -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <script src="https://code.jquery.com/jquery-1.12.3.js"></script> 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

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

      $("#choice").on("change",function(){ 

       var _val = $(this).val(); 

       if(_val == 2){ 
         table 
         .columns(2) 
         .search('USA',true) 
         .draw(); 
        } 
        else{ 
        table 
        .columns() 
        .search('') 
        .draw(); 
        } 
      }); 
     }); 



    </script> 

    <style> 
     #choice{ 
      width: 135px; 
      height: 35px; 
      margin-bottom: 20px; 
     } 
    </style> 

</head> 

<body> 

    <select name="choice" id="choice"> 
     <option value="1">Show All</option> 
     <option value="2">Hide USA</option> 
    </select> 

    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Age</th> 
       <th>Country</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Age</th> 
       <th>Country</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>61</td> 
       <th>USA</th> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>63</td> 
       <th>USA</th> 
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>61</td> 
       <th>Mexico</th> 
      </tr> 
      <tr> 
       <td>Cedric Kelly</td> 
       <td>45</td> 
       <th>Brazil</th> 
      </tr> 
      <tr> 
       <td>Airi Satou</td> 
       <td>56</td> 
       <th>Japan</th> 
      </tr> 

     </tbody> 
    </table> 

</body> 
</html> 

I 행, "나라"열 "USA"가

을 숨길 반면에 내 현재 코드는 "비 USA"행
숨기기있다
+0

이는처럼 읽고 "줘 코드!" 문제. 당신은 당신이 시도한 것을 실제로 보여주지 못했습니다. 그리고 빠른 Google 검색은 많은 좋은 결과를 가져옵니다. – dan08

+0

죄송합니다. 제가 시도한 내용과 관련 로직을 업데이트했습니다. 실제 프로젝트 코드를 공유 할 수 없다는 사과를 드렸습니다. 이것이 바로 짧은 질문이었습니다. –

답변

3

당신의 DataTable의 search을 사용하고, 예를 들어, 정규식 값을 지정할 수 있습니다

숨기기 비 (61) 나이

table 
    .columns(1) 
    .search('^(?:(?!61).)*$\r?\n?', true, false) 
    .draw(); 

모두보기

table 
    .columns() 
    .search('') 
    .draw(); 

결과 :https://jsfiddle.net/cmedina/egsqb68u/1/

UPDATE :

숨기기 USA :

table 
    .columns(2) //The index of column to search 
    .search('^(?:(?!USA).)*$\r?\n?', true, false) //The RegExp search all string that not cointains USA 
    .draw(); 

결과 :https://jsfiddle.net/cmedina/egsqb68u/2/

+0

안녕하세요,이 검색 매개 변수가 "^ (? :(?! 61). * $ \ r? \ n?"이라는 의미를 설명해 주시겠습니까? " ? –

+0

또한 검색을 위해 통과 한 true, false 매개 변수의 의미는 무엇입니까? –

+0

@AniruddhaRaje 첫 번째 매개 변수는 다른 값을 '61'로 필터링하는 RegExp'^ (? :(?! 61). * * \ r? \ n?'이고, 다음 매개 변수는 정규 표현식의 표시기이며 마지막 매개 변수는 스마트 표시기입니다. plase는 documentacion https://datatables.net/reference/api/search()를 읽고 regex는 http://www.w3schools.com/jsref/jsref_obj_regexp.asp를 참조하십시오. – CMedina