数据表分页不起作用？

Posted 2023-05-09

技术标签:

【中文标题】数据表分页不起作用？【英文标题】：DataTable pagination is not working? 【发布时间】：2018-03-28 13:31:01 【问题描述】：

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

1https://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 个条目时，它会显示所有条目..我附上了屏幕截图。我错过了任何其他插件吗？但是在提到的教程中，它说我只需要使用 "pagingType" : "full_numbers" 属性。

【问题讨论】：

【参考方案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。

【讨论】：

一个更简单的问题..我对所有 html 页面都做了同样的事情。（意思是数据表设置，链接到这个主页）但是我在其他页面没有看到任何数据表分页..我做错了什么？ @Ratha，不知道更多就很难说。数据表初始化是否正确？即例如是否有搜索框？您是否将 paging 设置为 false（您不应该）？您是否将pagingType 设置为某个奇数？ full_numbers 是默认值，所以你真的不需要设置它。当您以编程方式插入数据时，您可能会在数据构造之前意外初始化表，您确定表在之后插入一个<tbody>（或你做什么）到其他桌子？