DataTables pagingType이 작동하지 않습니다.

Question

"pagingType" 옵션을 작동시키지 못합니다. simple, full_numbers, simple_numbers 또는 full 일지 여부는 중요하지 않습니다. 미리 설정된 것만 사용하면됩니다.

셋업은 다음과 같습니다

1. jQuery를 부트 스트랩 3

통화와 1.11.1

DataTables. 페이징 유형 simple

<div class="col-xs-6"> 
<div class="dataTables_paginate paging_bootstrap"> 
    <ul class="pagination"> 
     <li class="prev disabled"> 
      <a href="#">← Prev</a> 
     </li> 
     <li class="active"> 
      <a href="#">1</a> 
     </li> 
     <li class="next disabled"> 
      <a href="#">Next → </a> 
     </li> 
    </ul> 
</div> 

이 중 하나를 했습니까 경우가 안됩니다 1 거기에 우리가 볼 수

$.ajax({ 
    url: "/getPeople", 
    contentType: "application/json", 
    processData: false,     
    complete: function(data){             
     $("#ppl").dataTable({ 
      "pagingType": "simple",    
      "aaData": data.responseJSON,      
      "aoColumns": [        
       { "sTitle": "Col1", "mDataProp": "col1"}, 
       { "sTitle": "Col2", "mDataProp": "col2"}, 
       { "sTitle": "Col3", "mDataProp": "col3"},        
       { "sTitle": "Col4", "mDataProp": "col4"} 
      ],    
      "oLanguage": { 
       "sUrl": "/javascripts/i18n/dataTables.Prop.json" 
      },     
      "bFilter": false, 
      "bInfo" : false,  
      "bLengthChange": false    
     }); 
    } 
}); 

이

는 pagyng div에 대한 출력 HTML입니다 너 이걸 보니? 감사합니다. .

Answer 1

데이터 테이블 자체의 첫 번째 페이지에 수용되는 행의 수가 4이기 때문에. 그러나 데이터 테이블의 두 번째 페이지에 아무 것도 없기 때문에 페이징 기능 및 옵션이 작동하지 않더라도 페이징 기능을 사용할 수 있습니다.

전체 내용이 데이터 테이블의 첫 번째 페이지에 표시되면 동적으로 페이징을 비활성화해야합니다. fnDrawCallback 메쏘드는 DOM의 행 수가 6보다 크면 페이징을 볼 수 있습니다. 그렇지 않으면 페이징 div가 숨겨지기 때문에 페이징이 보이지 않습니다.

$.ajax({ 
     url: "/getPeople", 
     contentType: "application/json", 
     processData: false,     
     complete: function(data){             
      $("#ppl").dataTable({ 
       "pagingType": "simple",    
       "aaData": data.responseJSON, 
       "iDisplayLength": 6, /* fixed number of rows in one page of datatable*/     
       "aoColumns": [        
        { "sTitle": "Col1", "mDataProp": "col1"}, 
        { "sTitle": "Col2", "mDataProp": "col2"}, 
        { "sTitle": "Col3", "mDataProp": "col3"},        
        { "sTitle": "Col4", "mDataProp": "col4"} 
       ],    
       "oLanguage": { 
        "sUrl": "/javascripts/i18n/dataTables.Prop.json" 
       },     
       "bFilter": false, 
     "fnDrawCallback": function (row, data, index) { 
         if ($("#ppl").find("tr").length > row.aoData.length) 
         { 
          $("#ppl").find('.dataTables_paginate')[0].style.display = "none"; 
          $("#ppl").find('.dataTables_info')[0].style.display = "none"; 
         } else { 
          $("#ppl").find('.dataTables_paginate')[0].style.display = "block"; 
          $("#ppl").find('.dataTables_info')[0].style.display = "block"; 
         } 
        } 

      }); 
     } 
    });