javascript - table序号 - layui静态表格



数据表分页不工作? (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页面,其中包含一个表。 我使用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”属性只..





datatables