Question

我正在使用DataTables，我希望我的长度（选择选项）在表格之外

（例如我的div）。

Answer 1

创建新的选择表单

<select name='length_change' id='length_change'>
    <option value='50'>50</option>
    <option value='100'>100</option>
    <option value='150'>150</option>
    <option value='200'>200</option>
</select>

init dataTables

var oTable = $('#example').DataTable({});

设置初始值

$('#length_change').val(oTable.page.len());

添加功能.change

$('#length_change').change( function() { 
    oTable.page.len( $(this).val() ).draw();
});

参考：https://datatables.net/reference/api/page.len()

Answer 2

只需将整个更改长度下拉复制到表格外即可直接移动。

而是在您想要的地方创建一个新的下拉列表，但在数据表调用中设置以下内容 -

  <select name='length_change' id='length_change'>
        <option value='50'>50</option>
        <option value='100'>100</option>
        <option value='150'>150</option>
        <option value=''>All</option>
    </select>

`var oTable = $('#sample_1').dataTable( {
.....
"bLengthChange": false,       //This will disable the native datatable length change
.....
...
"fnServerParams": function ( aoData ) {
    aoData.push( { "name": "length_change", "value": $('#length_change').val() } );
},
.....
....
});
`

The `aoData.push` will send the selected value of the customer length change to the server.

In the Model Class from where the array will be returned for the datatable, include the pushed value to the limit.

i.e. if `$postData` is the array of posted values to the server then -

`if($postData['length_change'])
    $limit = (int) $postData['length_change'];
 else
    $limit = _DEFALUT_VALUE;

`

我希望它有所帮助。

Answer 3

DataTables v 1.10+有一个built-in method用于自定义页面长度控件：

$('#example').DataTable({
   //specify values for drop down
   "lengthMenu": [[5, 10, 50, 100, 250, -1], [5, 10, 50, 100, 250, "All"]],
   //set the default to 100
   "pageLength": 100
});

这是Fiddle Demo。

数据表 - 数据表外的长度（选择选项）

3 个答案: