DataTable分页不起作用？

问题描述：

我有我的html页面，其中包含一个表格。我使用dataTable插件进行分页。 1 DataTable分页不起作用？

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”唯一属性..

答

拼版完美的作品。问题是你错误地插入每行<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分页在其他网页..什么即时做错了？ – Ratha

@Ratha，很难说不知道更多。数据表初始化是否正确？例如，我是否有一个搜索框？你是否将'paging'设置为false（你不应该）？你是否将'pagingType'设置为某个奇数值？ 'full_numbers'是默认的，所以你真的不需要设置它。当你像编程那样插入数据时，你有可能在数据构建之前意外地初始化表*，你确定该表是在你插入一个'

'（或你做什么）之后初始化的其他表？ – davidkonrad

谢谢somuch ..我错过了标签在我的链接html页面的表格中 – Ratha

DataTable分页不起作用？

相关问题

相关推荐