如何使用Datatables操作DOM修改默认搜索框的位置

解决方案 #

你之前的配置未生效主要是两点原因：一是dom配置规则使用不规范，二是未提前声明对应容器或未保留其余表格模块的渲染标识。可参考以下两种方案实现需求：

方案1：通过dom配置直接移动默认搜索框（保留所有原生功能） #

• 第一步：在你的HTML代码中，提前在目标位置放置你要挂载搜索框的容器，比如你要插入到目标<input title="Search"...代码段的位置，直接在对应位置写入：

  <div id="search"></div>
  

• 第二步：修正datatables的dom配置，注意要同时保留表格、分页等其余模块的渲染标识：

  $('#example').DataTable({
    // 这里的f对应搜索框模块，r是加载提示、t是表格本体、i是统计信息、p是分页，可根据你的实际需求增删
    "dom": '<"#search"f>rtip'
  })
  

  配置后默认搜索框会自动渲染到你提前写好的#search容器内，所有原生搜索功能完全保留。

方案2：直接复用你已写好的自定义<input title="Search">输入框 #

如果你不想使用datatables自动生成的搜索框，想直接用你现有的input标签实现搜索功能，可按以下配置操作：

• 第一步：在dom配置中去掉搜索框模块的标识f，关闭默认搜索框的渲染：

  let myTable = $('#example').DataTable({
    "dom": 'rtip'
  })
  

• 第二步：给你现有的<input title="Search">绑定搜索事件，调用datatables原生搜索方法：

  $('input[title="Search"]').on('input propertychange', function () {
    // 调用原生search方法执行搜索并重新渲染表格
    myTable.search($(this).val()).draw()
  })
  

  该方案可完全自定义搜索框的样式和位置，同时复用datatables的所有搜索逻辑。

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