Question

我正在使用Filament Group，Inc。的jQuery-Visualize，它生成由HTML表格元素驱动的HTML5画布图表。

这个插件的要求是，当使用多维表时，thead行tr中的第一个需要是td。

我显示图表，但我有问题，它会改变：

enter image description here

Javacript代码：

function fillDataTable(data) {

if ($("#table_campaigns").css("visibility") == "hidden")
    $("#table_campaigns").css("visibility", "visible");

$('#table_campaigns').dataTable({
    'aaData': data,
    'aoColumns': [
        { "sTitle": "" },
        { "sTitle": "2010" },
        { "sTitle": "2011" },
    { "sTitle": "2012" },
    { "sTitle": "2013" },
    { "sTitle": "2014" }
    ],
    "iDisplayLength": 10,
    "bJQueryUI": true,
    "bDestroy": true,
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
});
}

当我删除 {“sTitle”：“”} 时，我有： enter image description here

我认为我的图表javascript puglin区分 td 和 th 标记。因为在我的aspx页面中，我有这个并且它运行良好：

<script type="text/javascript">
        $(function(){
            $('table').visualize({type: 'line'}).appendTo('body');
        });
    </script>
</head>
<body>
    <table>
        <caption>2009 Employee Sales by Department</caption>
        <thead>
            <tr>
                <td></td>
                <th scope="col">2010</th>
                <th scope="col">2011</th>
                <th scope="col">2012</th>
                <th scope="col">2013</th>
                <th scope="col">2014</th>
            </tr>
        </thead>
                      ...

你可以看到我在 thead 和标签之后有第一个 td 标签。

现在我想在我的html页面中这样做：

</head>
<body>
<table id="table_campaigns" class="display">
    <caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>

我必须指定在我的dataTable {“sTitle”：“”} 必须是 td ？怎么做？还有另一种解决方案吗？

Answer 1

我解决了这个问题，visualize插件在html中有一个特殊的结构必须得到尊重。

您可以看到信息here

我在我的JavaScript中添加了：

$('tr th:eq(0)').replaceWith(function(){
    return $("<td />").append($(this).contents());
});
$('thead th').attr('scope', 'col');

使用dataTable并指定th或td列

1 个答案: