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」唯一屬性..

來源

2017-10-16 Ratha

拼版完美的作品。問題是你錯誤地插入每行<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代替。

來源

2017-10-17 00:31:29 davidkonrad

一個更簡單的問題..我已經做了所有我的HTML頁面相同。（意味着，數據表設置，這是鏈接到這個主頁）但我沒有看到任何dataTable分頁在其他網頁..什麼即時做錯了？ – Ratha

@Ratha，很難說不知道更多。數據表初始化是否正確？例如，我是否有一個搜索框？你是否將'paging'設置爲false（你不應該）？你是否將'pagingType'設置爲某個奇數值？ 'full_numbers'是默認的，所以你真的不需要設置它。當你像編程那樣插入數據時，你有可能在數據構建之前意外地初始化表*，你確定該表是在你插入一個''（或你做什麼）之後初始化的其他表？ – davidkonrad

謝謝somuch ..我錯過了標籤在我的鏈接html頁面的表格中 – Ratha

DataTable分頁不起作用？

回答

相關問題