jQuery dataTables 3x3 column with no header

I am using jquery.dataTables (1.8.1) to display a list of data, and I am displaying it into a 3x3 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

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>

Make a div for each block and place a 3 block at a single td per row and hide the header with css like this.

<table id="display_table">
<thead>
<th>Anything</th>
</thead>
<tbody>
<tr>
 <td><div class="block">Contents</div>
    <div class="block">Contents</div>
    <div class="block">Contents</div>
 </td>
</tr>
<tr>
 <td><div class="block">Contents</div>
    <div class="block">Contents</div>
    <div class="block">Contents</div>
 </td>
</tr>
<tr>
 <td><div class="block">Contents</div>
    <div class="block">Contents</div>
    <div class="block">Contents</div>
 </td>
</tr>
</tbody>
</table>

<style>
.dataTables_wrapper table thead{
    display:none;}
</style>

And Now code for datatable initialization