yadcf API完全参考掌握列过滤的编程控制方法【免费下载链接】yadcfYet Another DataTables Column Filter (yadcf)项目地址: https://gitcode.com/gh_mirrors/ya/yadcfyadcfYet Another DataTables Column Filter是一款强大的DataTables列过滤插件提供丰富的API接口帮助开发者实现灵活的表格数据过滤功能。本文将系统介绍yadcf的核心API方法、配置选项及实用示例帮助你轻松掌握表格列过滤的编程控制技巧。一、初始化API构建基础过滤框架1.1 yadcf.init()核心初始化方法yadcf.init()是启动列过滤功能的入口方法需传入DataTables实例和列配置参数。基础用法如下yadcf.init(oTable, [ {column_number: 0}, // 对第0列启用默认过滤 {column_number: 3} // 对第3列启用默认过滤 ], {cumulative_filtering: true}); // 启用累积过滤模式配置参数通过column_number指定目标列支持多列同时配置。全局选项如cumulative_filtering控制过滤行为设为true时多个过滤器将协同工作。1.2 yadcf.initMultipleTables()多表格初始化当页面存在多个DataTables实例时可使用initMultipleTables批量初始化过滤功能yadcf.initMultipleTables([oTable1, oTable2], [ {column_number: 0, filter_type: text}, {column_number: 1, filter_type: select} ]);该方法接收表格实例数组和统一的列配置大幅简化多表格场景的代码量。二、过滤控制API精细操控过滤行为2.1 yadcf.exFilterColumn()外部触发列过滤通过编程方式主动触发列过滤支持预过滤和动态过滤场景// 预过滤单个列 yadcf.exFilterColumn(oTable, [[0, Some Data 2]]); // 多列组合过滤 yadcf.exFilterColumn(oTable, [ [0, Some Data 1], [1, {from: 111, to: 1110}], // 数值范围过滤 [2, {from: , to: 11/25/2014}] // 日期范围过滤 ]); // 多选项过滤适用于multi_select类型 yadcf.exFilterColumn(oTable, [[0, [Option 1, Option 2]]]);参数格式采用[列索引, 过滤值]的二维数组结构支持文本、数值范围、日期范围等多种过滤类型。2.2 yadcf.exResetAllFilters()重置所有过滤条件一键清除表格所有列的过滤状态yadcf.exResetAllFilters(oTable);该方法无额外参数调用后将恢复表格初始显示状态常用于清除全部筛选功能按钮。2.3 yadcf.exResetFilters()重置指定列过滤精准重置特定列的过滤条件保留其他列的过滤状态yadcf.exResetFilters(oTable, [1, 2]); // 重置第1列和第2列的过滤参数为列索引数组适用于需要部分清除过滤条件的场景。三、数据交互API动态管理过滤数据3.1 yadcf.exGetColumnFilterVal()获取过滤值获取指定列当前的过滤值便于状态保存或条件判断var filterValue yadcf.exGetColumnFilterVal(oTable, 1); // 获取第1列的过滤值 console.log(当前过滤值:, filterValue);返回值类型与列的filter_type相关文本框返回字符串范围过滤返回对象{from, to}。3.2 yadcf.exRefreshColumnFilterWithDataProp()刷新过滤数据动态更新下拉选择框的选项数据适用于数据源变化场景yadcf.exRefreshColumnFilterWithDataProp(oTable, 5, [New Option 1, New Option 2]);参数依次为表格实例、列索引和新数据数组支持字符串数组或{value, label}对象数组格式。四、高级配置API定制过滤行为4.1 yadcf.initDefaults()全局默认配置设置全局默认参数统一控制所有过滤实例的行为yadcf.initDefaults({ language: { select: 请选择, filter_default_label: 所有选项 }, cumulative_filtering: true });常用配置包括语言文本、过滤模式、样式类等减少重复配置工作。4.2 yadcf.initSelectPluginCustomTriggers()自定义选择插件集成第三方选择插件如multiselect时通过该方法注册初始化、刷新和销毁触发器yadcf.initSelectPluginCustomTriggers( function($filterSelector) { $filterSelector.multiselect({}); }, // 初始化 function($filterSelector) { $filterSelector.multiselect(refresh); }, // 刷新 function($filterSelector) { $filterSelector.multiselect(destroy); } // 销毁 );支持select2、chosen等主流选择插件扩展过滤控件的交互能力。五、事件控制API处理过滤生命周期5.1 yadcf.initOnDtXhrComplete()DataTables请求完成回调注册DataTables的xhr请求完成事件处理函数用于异步数据加载后的过滤控件更新yadcf.initOnDtXhrComplete(function() { // 数据加载完成后刷新multiselect控件 $(#yadcf-filter--example-0).multiselect(refresh); });特别适用于使用服务器端分页的场景确保过滤控件与最新数据同步。5.2 yadcf.exFilterExternallyTriggered()外部触发过滤在启用externally_triggered模式时手动触发过滤执行// 初始化时启用外部触发模式 yadcf.init(oTable, [{ column_number: 0, externally_triggered: true }]); // 外部事件中触发过滤 $(#custom-filter-button).click(function() { yadcf.exFilterExternallyTriggered(oTable); });该模式下过滤不会自动执行需通过此API显式触发适合需要复杂条件判断的场景。六、核心配置选项解析6.1 filter_type过滤控件类型通过filter_type指定列过滤的控件类型支持多种过滤形式{ column_number: 2, filter_type: select, // 下拉选择框 // filter_type: multi_select, // 多选下拉框 // filter_type: text, // 文本输入框 // filter_type: range_number, // 数值范围 // filter_type: range_date // 日期范围 }不同过滤类型对应不同的配置参数和用户交互方式需根据数据类型选择。6.2 filter_options高级过滤配置通过filterOptions对象配置过滤行为细节如匹配模式、默认标签等{ column_number: 1, filter_type: text, filter_match_mode: contains, // 匹配模式contains/starts_with/exact filter_default_label: 搜索..., // 输入框默认提示文本 filter_reset_button_text: 清除 // 重置按钮文本 }filter_match_mode控制文本匹配精度filter_reset_button_text设为false可隐藏重置按钮。七、实战应用场景7.1 初始化配置示例综合使用初始化API和配置选项创建功能完善的过滤实例// 初始化DataTables var oTable $(#example).DataTable(); // 配置yadcf过滤 yadcf.init(oTable, [ { column_number: 0, filter_type: select, data: [Option 1, Option 2, Option 3], filter_default_label: 请选择 }, { column_number: 1, filter_type: range_number, filter_reset_button_text: 重置 }, { column_number: 2, filter_type: date, date_format: yyyy-mm-dd } ], { cumulative_filtering: true, text_data_delimiter: , });7.2 动态过滤控制示例结合按钮事件实现复杂过滤逻辑// 按状态筛选 $(#status-filter).on(change, function() { yadcf.exFilterColumn(oTable, [[3, $(this).val()]]); }); // 批量重置 $(#reset-selected).on(click, function() { yadcf.exResetFilters(oTable, [0, 1, 2]); }); // 保存当前过滤状态 $(#save-filter).on(click, function() { var filters [ yadcf.exGetColumnFilterVal(oTable, 0), yadcf.exGetColumnFilterVal(oTable, 1) ]; localStorage.setItem(saved-filters, JSON.stringify(filters)); });八、API方法速查表方法名用途核心参数yadcf.init()初始化过滤功能表格实例, 列配置数组, 全局选项yadcf.exFilterColumn()外部触发过滤表格实例, 过滤条件数组[[列索引, 值], ...]yadcf.exResetAllFilters()重置所有过滤表格实例yadcf.exGetColumnFilterVal()获取过滤值表格实例, 列索引yadcf.exRefreshColumnFilterWithDataProp()刷新过滤数据表格实例, 列索引, 新数据数组通过灵活运用这些API方法你可以实现从简单到复杂的各种表格过滤需求提升数据浏览和分析效率。yadcf的API设计遵循直观易用的原则同时提供丰富的定制选项满足不同场景的功能需求。要开始使用yadcf可通过以下命令克隆项目仓库git clone https://gitcode.com/gh_mirrors/ya/yadcf项目核心文件包括主JS文件jquery.dataTables.yadcf.js样式文件jquery.dataTables.yadcf.css源码目录src/【免费下载链接】yadcfYet Another DataTables Column Filter (yadcf)项目地址: https://gitcode.com/gh_mirrors/ya/yadcf创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考