Javascript 数据表分页不工作？_Javascript_Jquery_Html_Pagination_Datatables

Javascript 数据表分页不工作？

javascript jquery html pagination datatables

Javascript 数据表分页不工作？,javascript,jquery,html,pagination,datatables,Javascript,Jquery,Html,Pagination,Datatables,我有我的html页面，其中包含一个表。我使用dataTable插件进行分页我的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/j

我有我的html页面，其中包含一个表。我使用dataTable插件进行分页

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

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


表，th，td{
边框：1px纯黑；
文本对齐：居中；
}
#客户机数据{
边缘底部：100px；
}
客户
客户
客户
站点数量
重置处理
机器
数
机器名
$（文档）.ready（函数（）{
加载客户（）；
装载机（）；
});
函数loadCustomers（）{
$
.阿贾克斯({
键入：“GET”，
网址：'http://localhost:8080/cache/getCustomers',
数据类型：“json”，
成功：功能（数据）{
var行=[]；
$
.每个(
数据，
函数（id、值）{
排
.push（“
分页工作完全符合预期。问题是您错误地为每行插入了一个
节。由于每个数据表只能有一个
，因此显示的分页将基于数据集中的第一行，因此始终显示总共一页
您可以这样做：
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> ');
});

行
.push（'相反。
还有一个简单的问题。.我对所有html页面都做了相同的操作。（表示链接到此主页的datatable设置）但是我在其他页面中没有看到任何数据表分页。我做错了什么？@Ratha，如果不知道更多，很难说。数据表初始化是否正确？例如，是否有搜索框？是否将分页设置为false（您不应该）？是否将pagingType
设置为某个奇数？full\u numbers
是默认值，因此您确实不需要设置它。当您以编程方式插入数据时，您可能会在构造数据之前意外初始化表，您确定在插入（或者你怎么做）到其他桌子？
$('#clients_data').append('<tbody>'+rows.join('')+'</tbody>');