Question

I have created google Visualization table with server side Data poplation(Json created in PHP and return to datatable).How to add search filter for this Table? I have seen Sample Code in Visulaization playgroud. It shows using Control Wrapper and Chart Wrapper.So How to apply this control wrapper for my DataTable(Json data returned from 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

First, you need to load the “controls” package

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

Then, you need to convert the Table object into a ChartWrapper object, and add a Dashboard object and ControlWrapper object (and HTML div’s to hold them – the Dashboard div should contain both the control and table divs, but it is not strictly necessary to have it so). You bind the control to the table in the dashboard and draw the dashboard

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

Example HTML:

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

If you want to be able to filter on more than one column, you need additional controls for each column you want to filter.