Nice programing

jquery 데이터 테이블의 "10 개 항목 표시"선택 상자 값 변경

nicepro 2020. 12. 27. 20:48
반응형

jquery 데이터 테이블의 "10 개 항목 표시"선택 상자 값 변경


기본적으로 jquery 데이터 테이블은 기본적으로 10을 표시하며

옵션 : 10,25,50,100

이러한 옵션을 어떻게 변경할 수 있습니까?


iDisplayLength도 변경하는 것을 잊지 마십시오.

$(document).ready(function() {
    $('#tbl_id').dataTable({
        "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
        "iDisplayLength": 25
    });
} );

$(document).ready(function() {
    $('#example').dataTable( {
    "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
    "pageLength": 25
    } );
} );

aLengthMenu :이 매개 변수를 사용하면 페이지 매김이 활성화 될 때 DataTables에 표시되는 길이 드롭 다운 메뉴의 항목을 쉽게 지정할 수 있습니다. 표시된 옵션과 값 모두에 사용될 옵션의 1D 배열이거나 첫 번째 위치의 배열을 값으로 사용하고 두 번째 위치의 배열을 표시된 옵션으로 사용하는 2D 배열 일 수 있습니다. ( 'All'과 같은 언어 문자열에 유용합니다).

최신 정보

DataTables v1.10부터 찾고있는 옵션은 다음 pageLength과 같습니다.lengthMenu


제 경우에는 aLengthMenu 가 작동하지 않습니다. 그래서 이것을 사용했습니다. 그리고 그것은 작동하고 있습니다.

jQuery('#dyntable3').dataTable({            
            oLanguage: {sLengthMenu: "<select>"+
            "<option value='100'>100</option>"+
            "<option value='200'>200</option>"+
            "<option value='300'>300</option>"+
            "<option value='-1'>All</option>"+
            "</select>"},
            "iDisplayLength": 100

        });

감사합니다


datatables.net 에 따르면 이를 수행하는 적절한 방법은 값 배열과 함께 lengthMenu 속성을 추가하는 것입니다.

$(document).ready(function() {
    $('#example').dataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );

 $('#tblSub1View').dataTable({
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDestroy": true,
                    "aoColumnDefs": [{
                        'bSortable': false,
                        'aTargets': [0, 1]
                    }],
                    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    "iDisplayLength": 10,
                });

버튼을 클릭하면 데이터 테이블의 디스플레이 길이를 변경하면 다음을 시도 할 수 있습니다.

 $('.something').click( function () {
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 50;
oTable.fnDraw();
});

oTable = $('#example').dataTable();

버튼 (복사, 내보내기)과 함께 'lengthMenu'를 사용하려면이 옵션 dom : 'lBfrtip'을 사용해야합니다. 여기에서 https://datatables.net/reference/option/dom 각 기호의 의미를 찾을 수 있습니다. 예를 들어 'Bfrtip'과 같이 사용하면 lengthMenu가 표시되지 않습니다.


enter image description here pageLength : 50,

나를 위해 일했다 감사합니다

참조 용 버전

jquery-3.3.1.js

/1.10.19/js/jquery.dataTables.min.js

/buttons/1.5.2/js/dataTables.buttons.min.js


you can achieve this easily without writing Js. Just add an attribute called data-page-length={put your number here}. see example below, I used 100 for example

<table id="datatable-keytable" data-page-length='100' class="p-table table table-bordered" width="100%">

ReferenceURL : https://stackoverflow.com/questions/10630853/change-values-of-select-box-of-show-10-entries-of-jquery-datatable

반응형