首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery DataTables:在初始化时为命名列设置搜索筛选器

jQuery DataTables是一个功能强大的jQuery插件,用于在网页中创建交互式的数据表格。它提供了丰富的功能和灵活的配置选项,可以轻松地对数据进行排序、搜索、分页和过滤。

在初始化时为命名列设置搜索筛选器,可以通过使用columns选项来实现。columns选项是一个数组,每个元素代表一个列的配置。在每个列的配置中,可以使用searchable选项来设置是否启用搜索筛选器。

以下是一个示例代码:

代码语言:txt
复制
$(document).ready(function() {
    $('#example').DataTable({
        columns: [
            { data: 'name', searchable: true },
            { data: 'position', searchable: true },
            { data: 'office', searchable: true },
            { data: 'age', searchable: true },
            { data: 'start_date', searchable: true },
            { data: 'salary', searchable: true }
        ]
    });
});

在上面的代码中,我们通过columns选项定义了一个包含多个列的数据表格。每个列的配置中,data属性指定了列对应的数据字段,searchable属性设置为true表示启用搜索筛选器。

对于命名列,可以根据具体的需求设置不同的搜索筛选器。例如,可以使用文本输入框、下拉列表或自定义的筛选器组件来实现搜索功能。具体的实现方式取决于开发者的需求和设计。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。腾讯云云服务器提供了可靠的计算能力和丰富的配置选项,适用于部署和运行各种应用程序。腾讯云数据库提供了高性能、可扩展的数据库服务,支持多种数据库引擎和存储引擎,适用于数据存储和管理。

更多关于腾讯云云服务器和腾讯云数据库的详细信息,请访问以下链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

datatables 配套bootstrap3样式使用小结(1)

js有4个,①jquery,②bootstrap3,③datatables的js,④datatables对应bootstrap样式时用的。 为了说明问题,就不放bundle里面了。...src="~/Content/datatables/js/jquery.dataTables.js"> <script src="~/Content/<em>datatables</em>/js/<em>dataTables</em>.bootstrap.js...info: "总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",//左下角的信息显示,大写的词关键字。...通过浏览的开发者工具可以看到,四个控制块的id分别为table的id 加上 length,filter,info,paginate,所以如有需要,可以直接用js来强制控制。...编号②中的搜索框是输入内容后自动搜索表格上的所有列(当然可以通过他的api来实现搜索特定的列,比如某些隐藏列的筛选)。 图如下: ? 通过以上4个控制,基本可以满足大部分table列表的需求。

2.3K20

ASP.NET MVC5中实现具有服务端过滤、排序和分页的GridView

安装包管理默认是打开的,它会在你的解决方案中显示成已安装的 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables... nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...现在我们必须升级 jQuery 数据表初始化,以便它能够用过服务端的 ajaxing 来加载数据。...assetListVM.init(); }); 我们已经 init 函数中编写了数据表初始化代码, init 函数中,我们设置 serverSide...实现控制中的排序、筛选和分页 完成安装之后,进入 AssetController,编写 Get 行为的实现代码: public ActionResult Get([ModelBinder(typeof

5.4K80

datatables应用程序接口API

jQuery 选择操作 ajax.json()API 获得最终的json数据 ajax.params()API 获取最后一次Ajax请求提交的参数 ajaxAPI ajax方法的命名空间 clear...on()API 监听表格事件 one()API 第一次监听表格事件,然后移除监听 order()API 获得/设置表格排序 order.listener()API 一个元素上一个给定列添加一个排序监听...page()API 获得或者设置表格当前页 page.info()API 获得表格的分页信息 page.len()API 获得或者设置表格的分页长度 search()API 搜索表格里的数据 settings....index()DT 获得选中列的索引 column().nodes()DT 获得选中列所有单元格node column().order()DT 给指定列排序 column().search()DT 指定列搜索...API 对象 tables().body()DT 得到表格 tbody节点,如果是一次性初始化多个表格,使用类选择,或者table标签选择初始化,使用下列方法,table()针对单个table,tables

4.4K30

dataTable参数说明

无 searching 控制控件的搜索功能,如果false,控件的搜索功能被完全禁用,而且默认搜索组件会被隐藏....搜索是是否忽略大小写,true忽略 Boolean true search.regex 定义搜索字符串是否一个正则表达式 Boolean fasle...search.smart 禁用获取启用DataTables控件内置的只能过滤算法,这个算法会把搜索字符串进行分割并只能搜索,关闭这个算法仅仅实现简单的字符串查找,false关闭 Boolean...columns.type 通过设置列的类型让控件排序和过滤这个列是能更好的处理这个列的数据,比如日期,货币等.具体种类很多请参考这里: http://datatables.net/reference...可以看到,DataTables的Options设置还是比较全面和丰富的,当然Options仅仅能在控件初始化的时候对控件进行控制和影响,如果要在控件使用过程中对它进行控制和变化,就需要用到DataTables

4.5K20

jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等。...DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤。多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据。 ? ?...jqGrid Plugin - 基于 Ajax 的 jQuery 表格插件,可以 Ajax 方式从服务端获取数据填充进来(演示)。 ? ?...表格搜索筛选 ? tableFilter - 给表格添加简单的筛选功能。 ? ? uiTableFilter - 根据条件筛选(隐藏)表格行 ? ?...LiveFilter 1.1 - 非常轻量的表格筛选插件,部署非常简单。 ? ? jQtablesearch - 快速搜索,非常快 ? ?

7.3K10

【初学者指南】ASP.NET MVC 5中创建GridView

服务端和客户端有许多可用的第三方库,这些库能够提供所有必需的功能,如 Web 表格中的搜索、排序和分页等。是否包含这些功能,取决于应用的特殊需求,例如在客户端和服务端提供搜索或其它功能的需求等。...DataTables 使用 jQuery 数据表 以上库和插件都有自己的优缺点,其中 jQuery 数据表是个不错的选择。...例如: DOM JavaScript的 Ajax Server-side processing 我最喜欢的选项之一是, jQuery 数据表不但支持客户端搜索、分页、排序等,而且还提供了一个可以服务端处理的选项...安装包管理默认是打开的,它会在你的解决方案中显示成已安装的 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables... nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start

6.1K90

jquery.datatables 分页功能

当使用服务端处理时,DataTables将在页面上的每个绘图(即分页,排序,搜索等)时向服务发出一个Ajax请求。...与全局搜索一样,通常,服务端处理脚本大型数据集上不会执行正常的表达式搜索,但在技术上可以由脚本自行决定。...} 除了控制整个表的上述参数之外,DataTables还可以对每个行的数据源对象使用以下可选参数,您执行自动操作: { DT_RowId -- str // 将tr节点的ID属性设置为此值...组态 DataTables中的服务端处理通过使用该serverSide选项启用。只需设置它true,DataTabels将在服务端处理模式下运行。...作为一个对象,ajax直接映射到jQueryajax配置对象,所以任何可以jQuery请求中使用的选项,你也可以使用DataTables

4.8K20

jquery datatable 参数

当这个标志true的时候,分页就默认关闭 bSort true or false, default true 开关,是否让各列具有按列排序功能 bSortClasses true or false,..."My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] 给每个列单独定义其初始搜索列表特性(这一块还没搞懂) asStripClasses...整数,默认为100 用于指定当DataTable设置滚动时,最多可以一屏显示多少条数据 oSearch 默认{ "sSearch": "", "bRegex": false, "bSmart": true...} 又是初始时指定搜索参数相关的,有点复杂,没搞懂目前 sAjaxDataProp 字符串,default 'aaData' 指定当从服务端获取表格数据时,数据项使用的名字 sAjaxSource URL...无 用于传达table信息 fnInitComplete 1.object:oSettings - DataTables settings object 无 无 表格初始化完成后调用 fnPreDrawCallback

15710

jQuery插件DataTables环境搭建及简单使用

之前我已经简单介绍了这款插件,我把此类文章归类“Web前端”,不是很正确,这款神奇的插件不仅支持客户端,也支持服务端。通过ajax向服务请求json数据,并展示到表格中。...3.项目中引入 css 样式和 js 脚本文件 首先引入 js/jquery.js 文件 然后引入 js/jquery.dataTables.min.js 文件 最后引入 css.../jquery.dataTables.min.css 文件 如何使用DataTables 1.需要插入表格的地方,插入如下 html 代码 ...'info':'第_PAGE_页/共_PAGES_页(共_TOTAL_条记录)', 'infoEmpty':'没有查询到数据', 'search':'搜索...返回所有数据,DataTables会自动客户端实现本地分页,本地分页适用于数据量小的(建议1000条数据一下,非专业测试,仅做参考),在数据量大,请求时间过长的情况下,建议开启服务模式,服务端分页

2.7K20

DjangoWeb使用Datatable进行后端分页的实现

使用场景:不使用Django的模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。.../js/jquery.dataTables.min.js' %}" </script <script src="{% static '/bower_components/<em>datatables</em>.net-bs.../js/<em>dataTables</em>.bootstrap.min.js' %}" </script 2.页面加载时本人对表格内容进行了初始化,下面的两种方式对表格都能进行初始化,但是获取到的var 对象是不一样的...:", "sUrl": "", "sEmptyTable": "表中数据空", "sLoadingRecords": "载入中...开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务相应的值。

4.9K20

引入 SB Admin 2 作为后台管理系统主题

作为后台管理系统的主题,你可以从 Start Bootstrap 网站 预览并下载这个主题,或者通过 NPM 来下载安装: npm i startbootstrap-sb-admin-2 --save-dev 2、初始化前端资源文件...('lodash'); window.$ = window.jQuery = require('jquery') require('bootstrap/dist/js/bootstrap.bundle...然后新建 table.js 引入 datatables 组件相关代码用于渲染表格: require('startbootstrap-sb-admin-2/vendor/datatables/jquery.dataTables...@index'); 对应的请求处理逻辑位于后台控制 Admim\DashboardController 的 index 方法中,如果没有创建这个控制,现在创建它( app/http/controller...5、测试整体效果 blog 项目的 public 目录下运行 php -S localhost:9000 启动 PHP 内置 Web 服务,然后浏览中访问 http://localhost:9000

4.1K10

我的python学习--第十一天

表单验证插件 锁定用户禁止登录----逻辑端对用户状态判断 更优雅的显示仪表盘----使用jinja2模板{%if ...%}在前端判断 密码加密 包结构 总结 ---- 插件调用步骤: 下载插件包 html...格式 swal(标题,提示内容,事件类型) #标题和事件类型可缺省 学习地址:http://t4t5.github.io/sweetalert/ ---- 三、datatables表格插件 //引入datatables...TOTAL_ 项)",         "infoEmpty": "无记录",         "infoFiltered": "(从 _MAX_ 条记录过滤)",         "sSearch": "搜索.../> //初始化表单 $(".demoform").Validform(); 示例: <!...到16位任意字符; n:数字类型; n6-16:6到16位数字; s:字符串类型; s6-18:6到18位字符串; p:验证是否邮政编码; m:手机号码格式; e:email格式; url:验证字符串是否网址

1.6K10
领券