Javascript 更改 jQuery 数据表中显示的行数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12301286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the number of displayed rows in jQuery datatable
提问by You Kuper
Why the number of rows in jquery datatable(see the code below) is not set to 5? It is equal to 10 8as by default). Why 'iDisplayLength': 5does not work here?
为什么行数jquery datatable（见下面的代码）没有设置为 5？默认情况下等于 10 8as)。为什么'iDisplayLength': 5在这里不起作用？
<script>
function loadData() {
$.getJSON(
'modules/getData.php',
function(data) {
var oTable = $('#newspaper-b').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[3, "asc"]],
"bJQueryUI":true,
'iDisplayLength': 5,
'bLengthChange': false
});
oTable.fnDraw();
var list = data.flights;
var textToInsert = '';
for (var i = 0; i < list.length; i++) {
aux = list[i];
textToInsert += '<tr><td>';
textToInsert += aux.Var1;
textToInsert += '</td> </tr>' ;
}
$('table#newspaper-b tbody').html(textToInsert);
}
);
}
</script>
回答by Blazemonger
Try something like this. DataTables has built-in options that let you pull data from an AJAX source without trying to build it yourself. Read the documentationand customize it as needed:
尝试这样的事情。DataTables 具有内置选项，可让您从 AJAX 源中提取数据，而无需尝试自己构建。阅读文档并根据需要对其进行自定义：
function loadData() {
var oTable = $('#newspaper-b').dataTable({
"sAjaxSource": 'modules/getData.php',
"sPaginationType": "full_numbers",
"aaSorting": [
[3, "asc"]
],
"bJQueryUI": true,
'iDisplayLength': 5,
'bLengthChange': false
});
};
To modify the table in some way after the data is loaded, you'll want to add the fnDrawCallbackoption:
要在加载数据后以某种方式修改表，您需要添加fnDrawCallback选项：
"fnDrawCallback": function( oSettings ) {
// use jQuery to alter the content of certain cells
$lastcell = $('#newspaper-b').find('tr').find('td:last');
// manipulate it somehow
}
回答by Aravind
You can try
你可以试试
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
回答by scharfmn
In addition, if you have previously been running/testing with "bStateSave": trueand iDisplayLengthnot specified/at the default, then the saved default for iDisplayLengthwill override any subsequent attempts to specify a new value, and you will still get 10 rows. Try emptying the cache, setting "bStateSave": false, specifying the iDisplayLengthyou want, and running again.
此外，如果您之前一直在运行/测试"bStateSave": true并且iDisplayLength未指定/处于默认值，则保存的默认值iDisplayLength将覆盖任何后续尝试指定新值，并且您仍将获得 10 行。尝试清空缓存，设置"bStateSave": false，指定iDisplayLength您想要的，然后再次运行。
回答by jpmonette
This is definetely the easiest way I found:
这绝对是我发现的最简单的方法：
var oTable;
$(document).ready(function() {
$('.some-button').click( function () {
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 50;
oTable.fnDraw();
});
oTable = $('#example').dataTable();
});
