CODEWITHSUNDEEP
javascriptjqueryhtmlpaginationdatatables
Ratha
Ratha

Reputation: 9692

DataTable pagination is not working?

I have my html page which contains a table. I use dataTable plugin for pagination.1

1https://datatables.net/examples/basic_init/alt_pagination.html

My html as follows.

<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"
    type="text/javascript"></script>
<script type="text/javascript"
    src=" https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
    src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
  <style type="text/css">

table, th,td{
    border: 1px solid black;
    text-align:center;
}
#clients_data {
margin-bottom:100px;
}
</style> 
<meta charset="UTF-8">
<link rel="stylesheet"
    href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<title>Clients</title>
</head>
<body>
    <table style="width: 100%" id="clients_data" class="display" >
        <caption>Clients</caption>
        <thead>
            <tr>
                <th>Clients</th>
                <th>Number of Sites</th>
                <th>Reset the Processing</th>
            </tr>
        </thead>
    </table>

    <table style="width: 100%" id="machines_data">
        <caption>Machines</caption>
        <thead>

            <tr>
                <th>Number</th>
                <th>Machine Name</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(document).ready(function() {
            loadCustomers();
            loadMachines();

        });

        function loadCustomers() {
            $
                    .ajax({
                        type : 'GET',
                        url : 'http://localhost:8080/cache/getCustomers',
                        dataType : 'json',
                        success : function(data) {
                            var rows = [];
                            $
                                    .each(
                                            data,
                                            function(id, value) {
                                                rows
                                                        .push(' <tbody><tr><td><a href="clientSiteInfo.html?client='
                                                                + id
                                                                + '">'
                                                                + id
                                                                + '</td><td>'
                                                                + value
                                                                + '</td><td><button type="button" onclick="reset(\''
                                                                + id
                                                                + '\')">Reset</td></tr> </tbody>');
                                            });
                            $('#clients_data').append(rows.join(''));
                            $('#clients_data').DataTable({
                                "pagingType" : "full_numbers"
                            });

                        }
                    });
        };
.......

this loads data, but pagination is not working. means when I set 10 entries per page, it shows all entries..I have attached the screenshot. AM i missing any other plugin? But in the mentioned tutorial, it says I need to use "pagingType" : "full_numbers" attribute only.. enter image description here

Upvotes: 2

Views: 2858

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

The pagination works perfectly as expected. The problem is that you wrongly insert a <tbody> section for each row. And since you only can have one <tbody> per DataTable the shown pagination will be based on the very first row in the dataset, thus always showing one page in total.

You could do this instead :

rows
  .push(' <tr><td><a href="clientSiteInfo.html?client=' +
    id +
    '">' +
    id +
    '</td><td>' +
    value +
    '</td><td><button type="button" onclick="reset(\'' +
    id +
    '\')">Reset</td></tr> ');
});

and 

$('#clients_data').append('<tbody>'+rows.join('')+'</tbody>');

but you should really consider using columns instead.

Upvotes: 2

Related Questions