JQuery Datatable信息无法正确显示

时间:2014-07-16 20:42:24

标签: jquery datatables jquery-datatables

我的数据表有问题。当我的表加载它时所有工作(过滤器下拉列表显示),搜索显示但是'prev'和'next'之间的数字不是..摘要(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=" ">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>

和datatable init with:

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

任何想法都赞赏。 感谢

1 个答案:

答案 0 :(得分:1)

您的代码中存在两个问题:

第一个问题

数据表不支持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/