DataTabler 1.10 is displaying on page but not paginating

tarnett

Lower left label showing "Showing 1 to 1 of 1 entries". Page size is set to 10 and there are 14 records in dataset. Am I missing a config somewhere?

jLinux

Would need to be able to replicate this to fix it.

Can you atleast share the related code? You didnt give much details..

tarnett

Sorry. I guess that would really help

At the top of my HTML page I have :

$(document).ready(function() { $('#payeeTable').DataTable({ }); });

In my markup page, I'm using:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>

I"m using the bootstrap

<

table> command to display the data:

        <table border="0" id="payeeTable" class="table table-stripped" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th style="width: 15px"></th>
                    <th style="width: 250px">Payee</th>
                    <th style="width: 150px">City</th>
                    <th style="width: 100px">State</th>
                    <th style="width: 100px">Category</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th style="width: 15px"></th>
                    <th style="width: 250px">Payee</th>
                    <th style="width: 150px">City</th>
                    <th style="width: 100px">State</th>
                    <th style="width: 100px">Category</th>
                </tr>
            </tfoot>
            <tbody>
                <tr ng-repeat="p in payeeList | orderBy:'payeeName'">
                    <td><span class="glyphicon glyphicon-pencil" ng-click="editPayee(p.payee)"></span></td>
                    <td>{{p.payee}}</td>
                    <td>{{p.city}}</td>
                    <td>{{p.state}}</td>
                    <td>{{p.category}}</td>
                </tr>
            </tbody>
        </table>

The results is showing me ALL of the rows, with no pagination. It also displays the following "Showing 1 to 1 of 1 entries".

Any help would be appreciated...

allan

I'm reasonably confident that this is due to the mix of Angular's ng-repeat and DataTables. You basically have two different libraries which are trying to control the DOM which is going to lead to conflicts. In this case it sounds like DataTables is initialised before Angular builds its table.

If you want to use both at the same time have a look at Angular DataTables - it is third party and something I've not used much myself, but if you want to use both together, you'd need some kind of integration like that.

Allan

tarnett

Thank you Allan! Works perfectly now.