1

I am using jQuery-Visualize by Filament Group, Inc. which produces HTML5 canvas charts driven by HTML table elements.

A requirement of this plugin is, when using a multi-dimensional table, that the first th in the thead row tr needs to be a td.

I display a chart but I have a problem, it shifts:

enter image description here

Javacript code :

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

When I remove { "sTitle": "" }, I have this : enter image description here

I think my javascript puglin for the chart makes the difference between td and th tag. Because in my aspx page, I have that and it works well :

<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>
                      ...

And you can see that I have first td tag in thead and after th tags.

Now I want to do this in my html page :

</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>

I must specify that in my dataTable {"sTitle": ""} must be a td? How to do that? Are there has another solution?

2 Answers 2

0

I solved the problem, visualize plugin has a special structure in html must be respected.

You can see the information here

I added in my JavaScript :

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

Currently, the right way to do this is using cellType:

$('#example').dataTable( {
    "ajax": "json.txt",
    "columnDefs": [ {
    "targets": 0,
    "cellType": "th"
    } ]
} );

https://datatables.net/reference/option/columns.cellType

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.