Question

I’m using the jquery Datatables plug-in (http://www.datatables.net) and need to show many columns (75+) and some <50 rows. To make this easier for the user, I use the wonderful plugin FixedColumns.
I’m not using any pagination and sorting (this will make this slower and pagination for max 50 rows isn’t really needed)

In IE9 the rendering of the table is too slow (>7secs), so now I retrieve the data serverside using JSON data from PHP. This speeds things up, but now I have a problem.
My head of the table has two rows, where the first row has a colspan, the second row has the count of columns as the data.

Somehow I can’t use the THEAD inside the table this way and the “aoColumns” parameter doesn’t look like it supports multi-row columns. Does someone know how I can use multi row THEAD (including colspan) and using ajax for getting the data?

I’m using this code to build the table.

          var defaultOptions =  {
                "sScrollX": "100%",
                "bScrollCollapse": false,
                "sHeightMatch": "none",
                "bPaginate": false,
                "bLengthChange": false,
                "bSortClasses": false,
                "bSort":false,
                "bFilter": false,
                "bSort": false,
                "bInfo": false,
                "bAutoWidth": false,
                "bServerSide": false,
                "bProcessing":true,
                "bDeferRender": false,
                "sAjaxSource": "/leerkracht/controle_data.php",
                "fnServerParams": function ( aoData ) {
                      aoData.push( { "name":"groep", "value":"56"} );
                }, 
                "oLanguage": {
                         "sProcessing": "<div style='margin-top:7px;margin-bottom:7px;'><img src='/images/ajax-loader.gif' style='margin-right:7px;'/>Bezig met ophalen scores...</div>",    "sLengthMenu": "_MENU_ resultaten weergeven",    "sZeroRecords": "Geen resultaten gevonden",    "sInfo": "_START_ tot _END_ van _TOTAL_ resultaten",    "sInfoEmpty": "Geen resultaten om weer te geven",    "sInfoFiltered": " (gefilterd uit _MAX_ resultaten)",    "sInfoPostFix": "",    "sSearch": "Zoeken:",    "sEmptyTable": "Geen resultaten aanwezig in de tabel",    "sInfoThousands": ".",    "sLoadingRecords": "Een moment geduld aub - bezig met laden...",    "oPaginate": {        "sFirst": "Eerste",        "sLast": "Laatste",        "sNext": "Volgende",        "sPrevious": "Vorige"    }
                }

            }

        var oTable = $('#controleTable').dataTable(defaultOptions );
        new FixedColumns( oTable );

I really wish there was an plugin like Scroller for scrolling horizontally (after scrolling do an ajax call and redraw the ‘new’ columns and the ‘new data)…

Answer 1

I left jQuery Datatables because of the poor peformance. I decided to use Dojo grid and solved my problem. It is also a lot faster.