清空筛选状态必须手动重置dom、框架/插件状态和datatables过滤器三者：设input/textarea.value=""、checkbox/radio.checked=false、select.selectedindex=-1；调用table.search('').columns().search('').draw()；并处理flatpickr、tinymce等插件及vue/react响应式数据。
别用 type="reset"，也别只调 form.reset() —— 它们清的不是“筛选状态”，而是 HTML 初始值，对 JS 动态设的值、DataTables 内部过滤器、隐藏业务字段完全无效。
为什么 type="reset" 按钮在筛选表单里基本等于摆设
它触发的是浏览器原生重置逻辑：只认 <input value="xxx"> 这类写死在 HTML 里的初始值。一旦你用 JS 给 input 赋过值、动态插入了 <select></select> 选项、或用了框架绑定（比如 Vue 的 v-model），点它就失效。更糟的是，它会把非筛选字段（如 <input type="hidden" name="token">）也一并还原，可能破坏后续请求。
- 用户改了搜索框内容 → JS 更新了
input.value→ 点type="reset"→ 回到空字符串？错，回到 HTML 里写的value=""或没写时的 undefined 状态，但 DOM 已不同步 - 下拉筛选是 JS 动态生成的
<option></option>→reset()根本不感知这些新增项，selectedIndex可能越界或卡在旧索引 - 表格用了 DataTables → 它的
column.search()状态完全独立于 DOM，reset对它零影响
清空筛选字段必须手动遍历 + 显式赋值
目标很明确：所有文本类输入设 value = ""，复选/单选清勾选，<select></select> 设为未选中（推荐 selectedIndex = -1 而非 0，避免首项恰好是有效值），<textarea></textarea> 同样设 value = ""。关键是要跳过非筛选字段。
- 用
form.querySelectorAll('input, select, textarea')拿全部控件，再按需过滤：el.name && !el.hasAttribute('data-keep')（给要保留的字段加data-keep属性） -
input[type="checkbox"]和input[type="radio"]必须设checked = false，不能只清value -
<select multiple></select>需遍历options并逐个设selected = false，selectedIndex = -1不生效 - 验证是否真清空？别用
FormData—— 它忽略disabled和无name字段；直接读 DOM：el.value、el.checked、el.selectedIndex === -1
DataTables 的筛选状态必须单独重置
DOM 清空只是 UI 层，DataTables 的过滤器存在内存里：table.search() 是全局搜索，column.search() 是列级正则匹配（比如你用 ^部门A$ 做下拉筛选）。不碰它们，翻页或重新 draw 后旧条件照常生效。
- 核心一行：
table.search('').columns().search('').draw()，缺一不可 - 它不会自动同步 DOM 下拉框选中项 → 所以得额外执行
$('.filter-select').val('')（假设你的筛选下拉有 classfilter-select） - 如果下拉是通过
buildSelect(table)动态渲染的，确保它读取的是column.search()返回值 ——columns().search('')已让它返回空串，下次draw就自然空白 - 绝对不要用
table.clear().draw()—— 那是清数据行，不是清筛选条件
隐藏字段和受控组件怎么处理
很多筛选表单带隐藏字段（如 id、page、token）或第三方组件（日期选择器、富文本框）。它们既不该被清空，也无法用原生属性控制。
- 给所有非筛选字段加
data-no-reset属性，遍历时用!el.hasAttribute('data-no-reset')跳过 - 日期选择器（如 flatpickr）需调其 API：
flatpickrInstance.clear()，不能只清 input 的value - 富文本框（如 TinyMCE）同理：
tinymce.get('editor-id').setContent('') - Vue/React 表单必须走响应式更新（
model.value = ''或setState({})），直接改 DOM 会导致视图与状态不一致
最易被忽略的点：筛选重置不是“清 DOM”，而是“清三处状态”—— DOM 元素值、框架/插件内部状态、DataTables 过滤器。漏掉任何一层，用户都会发现“点了重置，但结果没变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
