데이터 테이블에 페이지가 하나만있는 경우 페이지 매김 비활성화

데이터 테이블에 페이지가 하나만있는 경우 페이지 매김 비활성화

---

나는 datatbales를 구현하고 있으며 내 요구 사항에 따라 페이지 매김 문제를 제외한 대부분의 문제가 해결되었습니다. 제 경우에는 매번 페이지 매김 탐색이 표시됩니다. 페이지가 하나 뿐인 경우 페이지 매김 탐색을 비활성화하고 싶습니다. 내 코드는 다음과 같습니다.

JS

<script>
  function fnFilterColumn(i) {

    $('#example').dataTable().fnFilter(
      $("#col" + (i + 1) + "_filter").val(),
      i
    );
  }
  $(document).ready(function() {


    $('#example').dataTable({
      "bProcessing": true,
      "sAjaxSource": "datatable-interestdb.php",
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "sDom": 'T<"clear">lfrtip',
      "oTableTools": {
        "aButtons": [

          {
            "sExtends": "csv",
            "sButtonText": "Save to CSV"
          }
        ]
      },
      "oLanguage": {
        "sSearch": "Search all columns:"
      }


    });


    $("#example").dataTable().columnFilter({
      aoColumns: [
        null,
        null,
        null,
        null
      ]
    });


    $("#col1_filter").keyup(function() {
      fnFilterColumn(0);
    });

  });
</script>

HTML

<table cellpadding="3" cellspacing="0" border="0" class="display userTable" aria-describedby="example_info">

  <tbody>
    <tr id="filter_col1">
      <td>Interest:</td>
      <td>
        <input type="text" name="col1_filter" id="col1_filter">
      </td>
    </tr>
  </tbody>
</table>


<table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" class="form_table display" id="example">

  <thead>
    <tr>
      <th class="sorting_asc" width="25%">Interest</th>
      <th width="25%">Name</th>
      <th width="25%">Email</th>
      <th width="25%">Contact No</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td colspan="4" class="dataTables_empty">Loading data from server</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>


</table>

---

동적으로 숨겨야한다고 생각합니다. fnDrawCallback()

$('#example').dataTable({
    "fnDrawCallback": function(oSettings) {
        if ($('#example tr').length < 11) {
            $('.dataTables_paginate').hide();
        }
    }
});​

편집- 여기 에서 찾은 또 다른 방법 은

"fnDrawCallback":function(){
      if ( $('#example_paginate span span.paginate_button').size()) {
      $('#example_paginate')[0].style.display = "block";
     } else {
     $('#example_paginate')[0].style.display = "none";
   }
}

---

Nicola의 답변을 바탕으로 fnDrawCallback () 콜백 및 oSettings 객체를 사용하여 테이블 페이지 매김을 그린 후 숨길 수 있습니다. oSettings를 사용하면 테이블 설정 (페이지 당 레코드, 테이블 별 선택기 등)에 대해 알 필요가 없습니다.

다음은 페이지 당 표시 길이가 총 레코드보다 큰지 확인하고 해당하는 경우 페이지 매김을 숨 깁니다.

$('#your_table_selector').dataTable({
    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
            $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        }
    }
});

선적 서류 비치

• fnDrawCallback ()
• o 설정

---

내 기능 플러그인 conditionalPaging을 참조하십시오 .

용법:

$('#myTable').DataTable({
    conditionalPaging: true
});

or

$('#myTable').DataTable({
    conditionalPaging: {
        style: 'fade',
        speed: 500 // optional
    }
});

---

이것은 JQuery Datatables V1.10 +에서 작업 할 때 올바른 접근 방식입니다. 프로세스는 일반적으로 이전 버전과 동일하지만 이벤트 이름과 API 메서드가 약간 다릅니다.

$(table_selector).dataTable({
    preDrawCallback: function (settings) {
        var api = new $.fn.dataTable.Api(settings);
        var pagination = $(this)
            .closest('.dataTables_wrapper')
            .find('.dataTables_paginate');
        pagination.toggle(api.page.info().pages > 1);
    }
});

선적 서류 비치

• https://datatables.net/reference/option/preDrawCallback
• https://datatables.net/reference/api/page.info ()

---

사용 @sina 언급 수정을 포함하여 위의 제안을 @GuiSim을 .

이 코드를 데이터 테이블 초기화 요청에 추가하십시오.

JQUERY

"fnDrawCallback": function (oSettings) {
  var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
  if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
    pgr.hide();
  } else {
    pgr.show()
  }
}

또는 더 나은 교체

"fnDrawCallback": null 

datatables.js에서 코드 사이트 전체에 적용하십시오.

---

@sina의 솔루션을 선호합니다. 잘 했어.

그러나 내 것은 몇 가지 필요한 개선 사항이 있습니다. @sina는 else필요한 경우 페이지 매김을 다시 표시 하는 부분을 잊었습니다 . 그리고 다음과 같이 all옵션 을 정의 할 수있는 가능성을 추가했습니다 lengthMenu.

jQuery('#your_table_selector').dataTable({
    "lengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],

    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength == -1
            || oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
        {
            jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        } else {
            jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').show();
        }
    }
});

---

jQuery- 다음 옵션으로 시도했지만 저에게 효과적이었습니다.

    $("#your_tbl_selector").dataTable({
    "pageLength": 3,
    "autoWidth": false,
    "fixedHeader": {"header": false, "footer": false},
    "columnDefs": [{ "width": "100%", "targets": 0 }],
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bInfo": false,
    "bAutoWidth": false,
    "oLanguage": {
     "oPaginate": {
       "sNext": "",
       "sPrevious": ""
     }
   },
   "fnDrawCallback": function(oSettings) {                 
        if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) {
          $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        }
    }
});

DataTable 출력보기

---

이 콜백 함수는 테이블 ID를 하드 코딩하지 않고도 모든 데이터 테이블에서 일반적으로 작동합니다.

$('.data-table').dataTable({
    fnDrawCallback: function(oSettings) {
       if(oSettings.aoData.length <= oSettings._iDisplayLength){
         $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
       }
    }
});

---

위에서 표현되지 않은보다 동적 인 솔루션이므로이 목표를 달성하기 위해 다음을 수행하고 있습니다. 먼저 총 페이지 수를 얻은 다음 페이지 매김을 표시 / 숨기기로 결정합니다. 이 코드의 아름다움은 사용자가 페이지 길이를 변경하는 경우에만 영향을받지 않습니다.

jQuery('#example').DataTable({
    fnDrawCallback: function(oSettings) {
        var totalPages = this.api().page.info().pages;
        if(totalPages == 1){ 
            jQuery('.dataTables_paginate').hide(); 
        }
        else { 
            jQuery('.dataTables_paginate').show(); 
        }
    }
});

---

스타일 시트에 다음을 추가하기 만하면됩니다.

.dataTables_paginate .paginate_button.disabled {
    display: none;
}

---

이 방법으로도 따를 수 있습니다.

"fnDrawCallback":function(){
      if(jQuery('table#table_id td').hasClass('dataTables_empty')){
            jQuery('div.dataTables_paginate.paging_full_numbers').hide();
      } else {
            jQuery('div.dataTables_paginate.paging_full_numbers').show();
      }
 }

이것은 나를 위해 일했습니다.

---

I tried to make sPaginationType as Dynamic in datatable for every entry but i can't find proper solution for that but what i did was

"fnDrawCallback": function(oSettings) {
    $('select[name="usertable_length"]').on('change', function(e) {
        var valueSelected  = this.value;
        if ( valueSelected < 10 ) {
            $('.dataTables_paginate').hide();
        } else {
            $('.dataTables_paginate').show();
        }
    });
},

---

$('#dataTable_ListeUser').DataTable( {

    //usual pager parameters//

    "drawCallback": function ( settings ) {

    /*show pager if only necessary
    console.log(this.fnSettings());*/
    if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
        $('#dataTable_ListeUser_paginate').css("display", "block");     
    } else {                
        $('#dataTable_ListeUser_paginate').css("display", "none");
    }

    }
   });

---

This isn't directly possible as DataTables doesn't support enabling and disabling features are run time. However, what you could do is make use of the fnDrawCallback() function to check to see if there is only one page, and if so hide the pagination controls.

---

If your data is not dynamic, i.e., server generates HTML table which is then enhanced by DataTables you can render the paging option on the server (I am using razor).

$("#results").dataTable({
  paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
  // more ...
});

---

I know this is an old post but for those of us that will be using this, and have OCD just like me, a change is needed.

Change the if statement,

if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) 

to

if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) 

With this little change you will see the pagination buttons for records lengths greater than 10, 25, 50, 100 instead of presenting the pagination buttons with only 10 records, technically 10, 25, etc records is still a one page view.

---

Here is my solution, it works also if you have multiple tables on the same page. It prevents the colision for example (table A must have pagination, and B must not).

tableId in my code is never undefined. If you haven't defined an ID for your table, dataTable will do it for you by adding something like 'DataTables_Table_0'

    fnDrawCallback: function (oSettings) {
        if ($(this).DataTable().column(0).data().length <= oSettings._iDisplayLength) {
            var tableId = $(this).attr('id');
            $('#' + tableId + '_paginate').hide();
        }
    }

---

This Solved my issues:

.dataTables_paginate .disabled {
   display:none;
}   
dataTables_paginate .disabled + span {
   display:none;
}   

Hope it helps you all

ReferenceURL : https://stackoverflow.com/questions/11050826/disable-pagination-if-there-is-only-one-page-in-datatables