JQ DataTables服务端模式顶部出现2个搜索框仅1个可正常使用问题求助

问题原因及解决方案 #

你碰到的双搜索框问题有以下几个明确诱因，按排查优先级排序：

1. 重复加载jQuery库
   你声明的依赖是jQuery 3.5.1，但实际HTML代码中又额外引入了jQuery 3.3.1，两次加载jQuery会导致之前挂载到jQuery上的DataTables实例被重置，表格初始化时会重复生成控件，包括搜索框。
   解决方法：删掉多余的jQuery引用，全局只保留一个版本的jQuery加载。

2. 表格重复初始化
   如果createTable函数被多次调用，同一个#deliveris表格会被重复初始化，每次初始化都会生成一套新的控件，就会出现多个搜索框。且只有最后一次初始化生成的搜索框会绑定服务端查询逻辑，和你描述的「仅1个搜索框可正常使用」现象完全吻合。
   解决方法：初始化前先判断表格是否已经初始化过，如果已初始化先销毁再执行初始化逻辑，示例代码如下：

function createTable(columns_titel) {
  // 新增判断逻辑，避免重复初始化
  if ($.fn.DataTable.isDataTable('#deliveris')) {
    $('#deliveris').DataTable().destroy();
  }
  // 此处保留你原来的初始化代码
}

3. Buttons配置异常
   你在初始化参数里配置了buttons导出按钮数组，但没有引入Buttons扩展对应的依赖文件，也没有在dom参数里指定按钮的渲染位置，会导致控件渲染逻辑异常，额外生成多余的搜索框。
   解决方法：如果不需要导出功能，直接删掉初始化参数里的buttons数组即可；如果需要使用导出功能，先引入对应的Buttons扩展依赖，再手动指定dom参数明确各控件的渲染位置，示例配置如下：

// 初始化参数里新增dom配置，l=长度选择、f=搜索框、r=加载提示、t=表格、i=信息、p=分页、B=按钮
dom: 'lfrtipB',
buttons: [
  'copy', 'csv', 'excel', 'pdf', 'print'
],

4. 手动写的搜索框冲突
   检查表格外层的HTML代码，是否有你手动添加的搜索框，和DataTables自动生成的搜索框重复，如有直接删除手动添加的搜索框即可。

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