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=" ">[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>

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 jsfiddle.net/DJBme — G.Mendes
– G.Mendes, Commented Jul 16, 2014 at 21:22
I have added the source code for the table. It utilsies twig. Thanks — tweakmag
– tweakmag, Commented Jul 16, 2014 at 21:31

Community · Accepted Answer · 2017-05-23 12:06:32Z

1

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/

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 16, 2014 at 21:45

G.Mendes

1,2211 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tweakmag Over a year ago

Thanks. The label was intended to not be present. but removing the colspan works. Thanks.

Collectives™ on Stack Overflow

JQuery Datable info not displaying correctly

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related