如何为服务器端填充的数据添加Table的搜索过滤器

问题描述

我创建了带有服务器端数据弹出窗口的谷歌可视化表（在PHP中创建Json并返回到数据表）。如何为此表添加搜索过滤器？我在Visulaization playgroud中看到了。它显示使用控制包装和图表Wrapper.So如何应用这个控制包装我的DataTable（从PHP返回的Json数据）？

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

推荐答案

首先，您需要加载controls包

First, you need to load the "controls" package

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

然后，您需要将Table对象转换为ChartWrapper对象，并添加一个Dashboard对象和ControlWrapper对象（和HTML div来保存它们 - Dashboard div应该包含控件和表格div，但并不是必须这样做）。您将控件绑定到仪表板中的表并绘制仪表板

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

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.

这篇关于如何为服务器端填充的数据添加Table的搜索过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！