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 페이지에 대해 동일한 작업을 수행했습니다. (의미,이 메인 페이지에 링크 된 데이터 테이블 설정)하지만 다른 페이지에서 어떤 데이터 테이블 페이지 매김을 보지 못했습니다. 뭐가 잘못 됐어? – Ratha

@ Ratha, 더 많이 알지 못하면 말하기 어렵다. 데이터 테이블이 초기화되어 있습니까? 예를 들어 검색 창이 있습니까? '페이징 (paging)'을 false로 설정합니까? 'pagingType'을 어떤 이상한 값으로 설정합니까? 'full_numbers'는 기본값이므로 설정하지 않아도됩니다. 프로그래밍 방식으로 데이터를 삽입 할 때 우연히 * 데이터가 생성되기 전에 실수로 테이블을 초기화 할 위험이 있습니다. ''(또는 할 일)을 삽입 한 후 * 테이블을 초기화했는지 확인하십시오. 다른 테이블들? – davidkonrad

somuch .. 고맙습니다. 내 연결된 HTML 페이지의 표에 태그를 놓쳤습니다. – Ratha

DataTable 페이지 매김이 작동하지 않습니까?

답변

관련 문제