Google visualization 如何为服务器端填充数据的表添加搜索筛选器

我已经用服务器端数据创建了google可视化表（用PHP创建Json并返回到datatable）。如何为这个表添加搜索过滤器？我曾在可视化游戏中见过。它展示了如何使用控件包装器和图表包装器。那么如何将此控件包装器应用于我的DataTable（从PHP返回的Json数据）

---

首先，您需要加载“controls”包

然后，您需要将Table对象转换为ChartWrapper对象，并添加Dashboard对象和ControlWrapper对象（以及容纳它们的HTML div——Dashboard div应该同时包含control和Table 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:

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

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