서버쪽에 채워진 데이터가 포함 된 표에 검색 필터를 추가하는 방법

Question

서버 측 데이터 Poplation (Json이 PHP에서 생성되고 데이터 테이블로 돌아 가기)이있는 Google 시각화 테이블을 만들었습니다.이 표에 검색 필터를 추가하는 방법은 무엇입니까? Visulaization playgroud에서 Sample Code을 보았습니다. 그것은 컨트롤 래퍼 및 차트 래퍼를 사용하여 보여줍니다. 내 DataTable (Json 데이터에서 반환 된 PHP)이 컨트롤 래퍼를 적용하는 방법? 먼저

function drawmsgtable(users) 
    { 
     var msgdata = $.ajax({ 
      url: "http://mysite/phpscripts/msgtable.php?users="+users+"", 
      dataType:"json", 
      async: false 
     }).responseText; 
     var messagedatatable = new google.visualization.DataTable(msgdata); 

     var options={'backgroundColor': 'transparent', 'width': 'auto'}; 
     $('#table_div').empty(); 
     var msgTable = new google.visualization.Table(document.getElementById('table_div')); 
     msgTable.draw(messagedatatable, options); 
    } 

Answer 1

, 당신은

google.load('visualization', '1', {packages: ['controls']}); 

그런 다음, 당신이 ChartWrapper 객체로 테이블 개체를 변환하는 데 필요한 "컨트롤"패키지를로드하고 대시 보드 개체 및 ControlWrapper 개체를 추가 (및 HTML 필요 div를 사용하면 대시 보드 div에는 컨트롤 div와 테이블 div가 모두 포함되어야하지만 반드시 그렇게해야하는 것은 아닙니다. 두 개 이상의 열을 필터링 할 수있게하려면

<div id="dash"> 
    <div id="control_div"></div> 
    <div id="table_div"></div> 
</div>​​​​​​​​​​​​​ 

, 당신은 추가해야 대시 보드

function drawmsgtable(users) { 
    var msgdata = $.ajax({ 
     url: "http://mysite/phpscripts/msgtable.php?users=" + users + "", 
     dataType: "json", 
     async: false 
    }).responseText; 
    var messagedatatable = new google.visualization.DataTable(msgdata); 

    var options = { 
     backgroundColor: 'transparent', 
     width: 'auto' 
    }; 

    $('#table_div').empty(); 

    var dashboard = new google.visualization.Dashboard(document.getElementById('dash')); 

    var msgTable = new google.visualization.ChartWrapper({ 
     chartType: 'Table', 
     containerId: 'table_div', 
     options: options 
    }); 

    var control = new google.visualization.ControlWrapper({ 
     chartType: 'StringFilter', 
     containerId: 'table_div', 
     options: { 
      filterColumnIndex: 0 
     } 
    }); 

    dashboard.bind([control], [msgTable]); 
    dashboard.draw(messagedatatable); 
}​ 

예 HTML을 대시 보드에서 테이블에 컨트롤을 바인딩 및 그릴 필터링 할 각 열의 컨트롤