数据表中的自定义 LengthMenu答案

【问题标题】：Custom LengthMenu in datatable数据表中的自定义 LengthMenu
【发布时间】：2016-05-20 07:26:38
【问题描述】：

目前我正在使用脚本，

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

HTML，

<input type="text" id=change />

我想更改长度菜单。用户可以在上面的文本框中手动输入数字。通过使用输入值，我想将其设置为 lengthMenu。

例如，如果用户在文本输入中输入 3，则将 lengthMenu 更改为 3。因此数据表将每页显示 3 条记录。

提前致谢。

【问题讨论】：

您好，您有一些代码可以发布，以便我们查看您到目前为止所做的尝试吗？

标签： jquery jsp datatables

【解决方案1】：

试试page.len() API method：

var length = $("#change").val();
table.page.len(length).draw();

【讨论】：

【解决方案2】：

(1)不要使用数据表的默认长度菜单，写一个html输入并css它以适应你的页面。

(2)将事件绑定为：'keyup'到你的输入，调用datatables提供的事件：event-length。

【讨论】：

【解决方案3】：

要自定义页面长度，我们应该有一个 Select Option 表单，如下所示

                    <select class="form-control form-control-sm rounded-0 col-12" id="rowsPerPage">
                        <option selected>Choose...</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                    </select>

要访问所选选项的值，请编写一个更改函数来选择选项，如下所示

dataDatatable是我们分配给datatable的变量

var dataDatatable = $('#vendorDatatable').DataTable({})

        $('#rowsPerPage').on('change', function() {
            let row = $("#rowsPerPage").val() 
            dataDatatable.page.len(row).draw();
        });

【讨论】：