如何在点击搜索按钮时将DataTables长度菜单切换为“All”

我来帮你搞定这个需求——其实用DataTables的内置API就能轻松实现，而且完全不需要ASP/VB参与，因为这是客户端的交互动作，JavaScript处理起来最直接高效：

第一步：确保正确保存DataTables实例 #

首先，初始化DataTables的时候，把实例赋值给一个变量，这样后续才能调用它的API：

// 替换成你的表格ID
var myDataTable = $('#yourTableElementId').DataTable({
    // 你的其他配置项
    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]] // 这里的-1对应"All"选项，是DataTables的默认约定
});

第二步：监听搜索事件并切换到「All」 #

接下来，你需要监听搜索触发的事件，然后调用API切换条目显示选项。这里分两种情况：

情况1：用DataTables自带的搜索框

如果是用DataTables默认生成的搜索框，直接监听它的search.dt事件即可：

myDataTable.on('search.dt', function() {
    // 切换到"All"选项，page.len(-1)对应lengthMenu里的-1配置
    myDataTable.page.len(-1).draw();
});

情况2：用自定义的搜索按钮

如果你的搜索是通过自定义按钮触发的，直接给按钮绑定点击事件，先执行搜索逻辑，再切换条目数：

// 替换成你的自定义搜索按钮ID和搜索输入框ID
$('#customSearchBtn').on('click', function() {
    // 获取搜索输入框的值
    var searchKeyword = $('#customSearchInput').val();
    // 执行搜索
    myDataTable.search(searchKeyword).draw();
    // 切换到"All"选项
    myDataTable.page.len(-1).draw();
});

关键说明 #

• page.len(-1)：这个方法是DataTables专门用来设置每页显示条目数的API，这里的-1对应你lengthMenu配置里的「All」选项（如果你的「All」配置用的是其他值，比如9999，那这里就改成对应的数值即可）。
• draw()：调用这个方法会重新渲染表格，让条目数的变更生效。

关于ASP/VB的补充 #

其实ASP/VB是服务器端技术，页面渲染完成后就无法直接控制客户端的DataTables交互了——除非你通过AJAX重新请求页面，但这完全没必要，用上面的JavaScript方案是最优解。

内容的提问来源于stack exchange，提问作者Cole