Question

我的html页面包含一个表格。我使用dataTable插件进行分页。1

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

我的HTML如下。

<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"
                            });

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

这会加载数据，但分页不起作用。意思是当我每页设置10个条目时，它显示所有条目..我已附上截图。 AM我错过了任何其他插件？但在上面提到的教程中，它说我需要使用“pagingType”：“full_numbers”属性..

Answer 1

分页完美按预期工作。问题是您错误地为每一行插入<tbody>部分。由于每个DataTable只能有一个<tbody>，所以显示的分页将基于数据集中的第一行，因此总是显示一个页面。

你可以这样做：

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> ');
});

和

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

但您应该考虑使用columns。

DataTable分页不起作用？

1 个答案: