JQuery Datable info not displaying correctly

Question

I have a problem with datatable. When my table loads it all works (the filter dropdown shows), search shows BUT the numbers between 'prev' and 'next' do not.. neither does the summary (x of x records). However, as soon as I do a search everything displays properly.

The table code is:

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

Generate Table Output:

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

and datatable init with:

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

any ideas appreciated. Thanks

if you post the table html exactly as in file (not the rendered in browser one) will help us more, see what I'm talking about http://jsfiddle.net/DJBme/ — G.Mendes, Jul 16 '14 at 21:22
I have added the source code for the table. It utilsies twig. Thanks — tweakmag, Jul 16 '14 at 21:31

score 1 · Accepted Answer · edited May 23 '17 at 12:06

There are 2 problems in your code:

First Problem:

Datatables doesn't support colspan as it is, you need to remove it from first th or follow what is mentioned in this answer: DataTables - Not working when added colspan for the last column

Second Problem:

There is one header column missing for "propertyName", which I can't say if the missed label was intended.

Result with fixes applied:

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

Thanks. The label was intended to not be present. but removing the colspan works. Thanks. — tweakmag, Jul 16 '14 at 22:26

JQuery Datable info not displaying correctly

1 Answers1