Информация JQuery Datable отображается неправильно

У меня проблема с таблицей данных. Когда моя таблица загружается, все работает (отображается раскрывающийся список фильтров), поиск показывает, НО числа между «предыдущий» и «следующий» не... и сводка (x из x записей). Однако, как только я делаю поиск, все отображается правильно.

Код таблицы:

<table id="propertieslist" class="admintable">
                <thead>
                    <tr>
                        <th colspan="2"></th>
                        <th class="divider"></th>
                        <th>Type</th>
                        <th>Region</th>
                        <th>Address</th>
                        <th class="divider"></th>
                        <th>Owner</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for property in properties %}
                    <tr>
                        <td><a href="{{ path('view_property', {'id' : property.id}) }}">{{ property.id }}</a></td>
                        <td>{{ property.propertyName }}</td>
                        <th class="divider"></th>
                        <td>{{ property.type }}</td>
                        <td>{{ property.propertyRegion }}</td>
                        <td>{{ property.propertyAddr1 }}</td>
                        <th class="divider"></th>
                        <td>{{ property.owner.ownerName }}</td>
                        <td><span class="label {{ property.status }} label-mini">{{ property.status }}</span></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

Сгенерировать вывод таблицы:

<table class="admintable dataTable" id="ownerslist" aria-describedby="ownerslist_info">
                <thead>
                <tr role="row"><th colspan="2" rowspan="1"></th><th class="sorting" role="columnheader" tabindex="0" aria-controls="ownerslist" rowspan="1" colspan="1">Email</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="ownerslist" rowspan="1" colspan="1">Phone</th><th class="divider sorting" role="columnheader" tabindex="0" aria-controls="ownerslist" rowspan="1" colspan="1"></th><th class="sorting" role="columnheader" tabindex="0" aria-controls="ownerslist" rowspan="1" colspan="1"># Props.</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="ownerslist" rowspan="1" colspan="1"># Bookings</th><th class="divider sorting" role="columnheader" tabindex="0" aria-controls="ownerslist" rowspan="1" colspan="1"></th><th class="sorting" role="columnheader" tabindex="0" aria-controls="ownerslist" rowspan="1" colspan="1">Proforma</th></tr>
                </thead>

            <tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="odd">
                        <td class=" "><a href="#">2</a></td>
                        <td style="white-space: nowrap" class=" ">Adam Martin</td>
                        <td class=" ">[email protected]</td>
                        <td style="white-space: nowrap" class=" ">33</td>
                        <th class="divider "></th>
                        <td class=" ">2</td>
                        <td class=" ">23</td>
                        <th class="divider "></th>
                        <td class=" ">$98.23</td>
                    </tr><tr class="even">
                        <td class=" "><a href="#">3</a></td>
                        <td style="white-space: nowrap" class=" ">Alpine Holiday Houses</td>
                        <td class=" ">[email protected]</td>
                        <td style="white-space: nowrap" class=" ">1111</td>
                        <th class="divider "></th>
                        <td class=" ">2</td>
                        <td class=" ">23</td>
                        <th class="divider "></th>
                        <td class=" ">$98.23</td>
                    </tr></tbody></table>

и datatable init с:

$(document).ready(function() {
        $('#ownerslist').dataTable(
            {
                "bSort" : false
            }
        );
    });

любые идеи оценены. Спасибо


jquery datatables jquery-datatables
person tweakmag    schedule 16.07.2014    source источник
comment
если вы разместите таблицу html точно так же, как в файле (а не в браузере), это поможет нам больше, посмотрите, о чем я говорю jsfiddle.net/DJBme   -  person G.Mendes    schedule 17.07.2014
comment
Я добавил исходный код для таблицы. Он использует веточку. Спасибо   -  person tweakmag    schedule 17.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

В вашем коде 2 проблемы:

Первая проблема:

Datatables не поддерживает colspan как есть, вам нужно удалить его из первого th или следовать тому, что упомянуто в этом ответе: DataTables — не работает при добавлении colspan для последнего столбца

Вторая проблема:

Для «propertyName» отсутствует один столбец заголовка, о котором я не могу сказать, предназначалась ли пропущенная метка.

Результат с примененными исправлениями:

<table id="ownerslist" class="admintable">
<thead>
    <tr>
        <th></th> <!-- removed colspan -->
        <th></th> <!-- added th -->
        <th class="divider"></th>
        <th>Type</th>
        <th>Region</th>
        <th>Address</th>
        <th class="divider"></th>
        <th>Owner</th>
        <th>Status</th>
    </tr>
</thead>
<tbody>{% for property in properties %}
    <tr>
        <td><a href="{{ path('view_property', {'id' : property.id}) }}">{{ property.id }}</a>
        </td>
        <td>{{ property.propertyName }}</td>
        <th class="divider"></th>
        <td>{{ property.type }}</td>
        <td>{{ property.propertyRegion }}</td>
        <td>{{ property.propertyAddr1 }}</td>
        <th class="divider"></th>
        <td>{{ property.owner.ownerName }}</td>
        <td><span class="label {{ property.status }} label-mini">{{ property.status }}</span>
        </td>
    </tr>{% endfor %}</tbody>
</table>

FIDDLE: http://jsfiddle.net/DJBme/2/

person G.Mendes    schedule 16.07.2014
comment
Спасибо. Этикетка должна была отсутствовать. но удаление colspan работает. Спасибо. - person tweakmag; 17.07.2014