JQuery DataTables столбец 3x3 без заголовка

Question

Я использую jquery.dataTables (1.8.1) для отображения списка данных, и я отображаю его в сетке 3x3.Я не хочу использовать заголовок, так как он не нужен.

Вот мой 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]
});

и вот таблица:

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

на самом деле это довольно большая работа, но дататабельное сообщение является предупреждением

Предупреждение DataTables: запрошенный неизвестный параметр '2' из источника данных для строки 3

, и когда я проверяю его в firebug, вот что происходит:

Предупреждение DataTables: неожиданное количество элементов TD.Ожидаемое 12 и полученное 11. DataTables не поддерживает rowspan / colspan в теле таблицы, и для каждой комбинации строки / столбца должна быть одна ячейка.

Судя по звуку, кажется, что ятолько 11 $grid_data для отображения, в то время как dataTables ожидает 12, поскольку таблица приводит к 4 строкам, и, поскольку я не инициировал header(thead), кажется, что dataTable генерирует это на лету:

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

Я потратил некоторое время на изменение таблицы или javascript, чтобы они не давали никаких предупреждений, я также искал любые возможные решения, но ни одно из них не помогло, пожалуйста, помогите мне

Answer 1

Создайте div для каждого блока и поместите 3 блока по одному td на строку и скройте заголовок с помощью css следующим образом.

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

И теперь код для инициализации с датой

Answer 2

Держи все tr в стороне 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>