Question

I am using jquery.dataTables (1.8.1) to display a list of data, and I am displaying it into a 3×3 grid. I don’t want to use the header since it is not necessary.

Here’s my javascript:

$('table.grid_view').dataTable({
    "oLanguage": {
        "sSearch": "<p style='margin:5px 0;'>Search:</p>"
    },
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bAutoWidth": false,
    "iDisplayLength": 3,
    "sPaginationType": "full_numbers",
    "aoColumns": [null,null,null]
});

and here’s the table:

<div id='grid_wrap'>
    <table class="grid_view">
        <tbody>
        <?php
        if (!empty($grid_datas)){
            $i = 1;
            $index = 0;
            foreach ($grid_datas as $grid_data){
                $index++;
                if($i == 0){ echo '<tr>';}
                if($index == count($grid_datas)){$colspan = $index % 3;}
                else{$colspan = 1;}
            ?>
                <td>
                    <?php echo $grid_data['the_data'];?>
                </td>
            <?php
                if($index == count($grid_datas) || $index % 3 == 0){
                    echo '</tr>';
                    $i = 0;
                }else{$i++;}
            }?>
        </tbody>
        <?php }else{?>
        <tr>
            <td>No data Found</td>
        </tr>
        <?php }?>
    </table>
</div>

actually this pretty much work, but the datatable is alerting message

DataTables warning: Requested unknown parameter ‘2’ from the data
source for row 3

and when I check it in firebug, here’s what happens:

DataTables warning: Unexpected number of TD elements. Expected 12 and
got 11. DataTables does not support rowspan / colspan in the table
body, and there must be one cell for each row/column combination.

from the sound of it, it seems that I only have 11 $grid_data to display while dataTables is expecting 12 since the table is resulting 4 rows, and since i didn’t initiate any header(thead), it seems that the dataTable is generating this on the fly:

<thead>
    <tr>
        <th class="sorting_disabled" rowspan="1" colspan="1"></th>
        <th class="sorting_disabled" rowspan="1" colspan="1"></th>
        <th class="sorting_disabled" rowspan="1" colspan="1"></th>
    </tr>
</thead>

I have spent some time modifying the table or the javascript so that it wont give any alert, I have also search for any possible solutions, but none of them seems to work, please help me

Answer 1

Keep your all tr in side tbody

<div id='grid_wrap'>
    <table class="grid_view">
        <tbody>
        <?php
        if (!empty($grid_datas)){
            $i = 1;
            $index = 0;
            foreach ($grid_datas as $grid_data){
                $index++;
                if($i == 0){ echo '<tr>';}
                if($index == count($grid_datas)){$colspan = $index % 3;}
                else{$colspan = 1;}
            ?>
                <td>
                    <?php echo $grid_data['the_data'];?>
                </td>
            <?php
                if($index == count($grid_datas) || $index % 3 == 0){
                    echo '</tr>';
                    $i = 0;
                }else{$i++;}
            }?>

        <?php }else{?>
        <tr>
            <td>No data Found</td>
        </tr>
        <?php }?>
      </tbody>
    </table>
</div>