JQuery 数据表信息未正确显示

Question

我的数据表有问题。当我的表加载它一切正常（过滤器下拉显示）时，搜索显示但“上一个”和“下一个”之间的数字没有..摘要也没有（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=" ">y@y.com</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=" ">x@x.com</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>

和数据表初始化：

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

任何想法表示赞赏。 谢谢

Answer 1

你的代码有两个问题：

第一个问题：

Datatables 不支持 colspan，您需要将其从第一个 th 中删除或按照此答案中提到的内容进行操作：DataTables - Not working when added colspan for the last column

第二个问题：

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