如何使用 Datatables 操作 DOM 并更改搜索框位置

Posted 2023-05-09

【中文标题】如何使用 Datatables 操作 DOM 并更改搜索框位置

【英文标题】：How to manipulate the DOM with Datatables and change the search box position

【发布时间】：2021-10-27 03:14:11

【问题描述】：

我一直在阅读official documentation 并试图了解如何使用DOM 操作来更改默认搜索框的位置，但我无法使其工作。

LIVE DATATABLE DEMO

所以基本上我想要的是更改搜索框的位置并将其放在<input title="Search"... 代码中，保持相同的功能。

我虽然这样可以解决问题，但它没有：

"dom": '<"#search"f>'

任何帮助将不胜感激。

【参考方案1】：

您可以使用隐藏搜索字段

dom: 'lrt'

然后您需要从您的字段中激活搜索

// I have added id="search" to your search field to make it easier
$('#search').on('input', () =>

    DT1.search($('#search').val()).draw();
);

这是工作小提琴

http://live.datatables.net/vepedopa/3/edit

【讨论】：

优秀且非常容易理解。谢谢！