更改数据表中每个页面的页面长度

Question

我在jsp页面上有下面的数据表，我想更改每个页面的页面长度。我尝试了三种方法，但页面长度没有改变。我使用了"；lengthChange"；选项为"；真"；。但也不起作用

$(document).ready(
function() {
document.getElementById("invoiceResult").style.display="block";
dTable = $('#result').DataTable(
{
paging : true,
"lengthChange": true,
fixedHeader : true,
"scrollY" : 400,
"scrollX" : true,
"bJQueryUI" : true,
fixedColumns : true,
"pageLength" : 25,
"order" : [ [ 4, "desc" ] ],
"columnDefs" : [ {
"width" : "100px",
"targets" : 0
} ],
drawCallback: function(){
$('#result').margetable({
type: 2,
colindex: [0,1],

});      
},
rowsGroup: [0,1]
});

//This method is called whenever the page is redrawn
$('#result').on( 'draw.dt', function () {

var info = table.page.info();
var currentPage = info.page + 1;

if(currentPage==2){

//approach 1:
$('#result').DataTable.page.len(80).draw();

//approach 2:
$('#result').DataTable.getPager().config.size = 80;
$('#result').DataTable.refresh();

//approach 3:
$('#result').DataTable({ pageLength: 80 });
}   
});

Answer 1

我不确定您遇到的问题，但在我的示例中(使用您的选项(，我选择了lengthChange方法，它运行良好：

//var dataUrl = "https://my-json-server.typicode.com/SagnalracSO/repoJD/employees?_limit=7";
var dataUrl = "https://my-json-server.typicode.com/SagnalracSO/repoJD/employees";
var table = $('#example').DataTable({
ajax: {
url: dataUrl,
dataSrc: ''
},
lengthChange: true,
pageLength: 25,
scrollY : 400,
scrollX : true,
bJQueryUI : true,
fixedColumns : true,
order : [ [ 4, "desc" ] ],
columnDefs : [ {
width : "100px",
targets : 0
}],
drawCallback: function() {
$('#example').margetable({
type: 2,
colindex: [0,1]
});      
},
rowsGroup: [0, 1],
columns: [
{ data: 'id' },
{ data: 'firstName' },
{ data: 'lastName' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' },
{ data: 'startDate' }
]
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Merge-Cells-HTML-Table/jquery.table.marge.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start Date</th>
</tr>
</thead>
</table>
<br>