定制jQuery DataTables：移除默认组件后条目选择功能实现受阻

嘿，我来帮你解决这个自定义条目选择的难题！你已经搞定了自定义搜索，离成功只差一步啦。下面是完整的解决方案，包括隐藏默认控件和实现自定义条目选择功能：

第一步：初始化DataTables时隐藏默认控件 #

首先在初始化表格的时候，我们通过dom配置项去掉默认的条目选择器（l）和搜索框（f），只保留表格、分页、信息这些必要元素：

$(document).ready(function() {
  // 初始化表格，隐藏默认的搜索和条目选择器
  $tableinstance = $("#example").DataTable({
    dom: 'rtip' // 含义：r=排序控件, t=表格主体, i=信息栏, p=分页栏
  });

  // 你的自定义搜索代码（已经没问题，保留即可）
  $('#customsearchfield').keyup(function() {
    $tableinstance.search($(this).val()).draw();
  });

第二步：实现自定义条目选择功能 #

接下来处理你的#sort下拉框，核心是用DataTables的page.len()方法设置每页显示行数，然后调用draw()更新表格。这里我帮你完善了代码，确保数值有效：

// 自定义条目选择器逻辑
  $('#sort').change(function() {
    // 提取数值（如果你的选项值是纯数字，这步replace可以省略）
    let quantity = parseInt($(this).val().replace(/[a-z]/gi, ''), 10);
    
    // 确保是有效数字再执行
    if (!isNaN(quantity)) {
      $tableinstance.page.len(quantity).draw();
    }
  });
});

补充：自定义控件的HTML示例 #

如果你的HTML还没完善，这里给个参考：

<!-- 自定义条目选择器 -->
<select id="sort">
  <option value="10">10 条/页</option>
  <option value="25">25 条/页</option>
  <option value="50">50 条/页</option>
  <option value="100">100 条/页</option>
</select>

<!-- 自定义搜索框 -->
<input type="text" id="customsearchfield" placeholder="输入关键词搜索...">

<!-- 表格容器 -->
<table id="example" class="display" style="width:100%">
  <!-- 你的表格thead、tbody内容 -->
</table>

小提示 #

如果你的下拉选项值直接用纯数字（比如<option value="10">10条</option>），那代码里的replace(/[a-z]/gi, '')可以直接删掉，简化成let quantity = parseInt($(this).val(), 10);就行。

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