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

带有比较运算符的jQuery DataTables过滤器列

jQuery DataTables 是一款流行的前端 jQuery 插件,它提供了高度定制化的表格功能,包括表格排序、过滤、搜索、分页等功能。在 DataTables 中,可以使用 “column()” 方法来获取特定列的过滤条件,并使用 “search()” 方法来对数据进行过滤。

下面是一个示例代码,演示如何使用 “column()” 和 “search()” 方法来实现带有比较运算符的过滤:

代码语言:javascript
复制
$(document).ready(function() {
    $('#example').DataTable({
        "columnDefs": [
            { "type": "numeric-range", "targets": [0, 1, 2, 3, 4, 5] },
            { "type": "search", "targets": [0, 1, 2, 3, 4, 5] },
            { "type": "order", "targets": [0, 1, 2, 3, 4, 5] }
        ],
        "order": [[2, "asc"], [3, "asc"]]
    });
});

在这个示例代码中,我们定义了两个 “columnDefs” 对象,第一个对象定义了四个数字列的排序和过滤条件,其中 “targets” 属性指定了要排序和过滤的列。第二个对象定义了五个搜索列的过滤条件,其中 “targets” 属性指定了要搜索的列。最后,我们使用 “order” 对象来指定排序顺序。

通过使用 “column()” 和 “search()” 方法,我们可以轻松地实现带有比较运算符的过滤。在上面的示例代码中,我们使用 “numeric-range” 类型来指定数字列的过滤条件,这种类型允许我们使用比较运算符来指定过滤范围。对于搜索列,我们使用 “search” 类型来指定搜索条件,这种类型允许我们使用比较运算符来指定搜索值。

总之,使用 “column()” 和 “search()” 方法可以实现带有比较运算符的过滤,这是一种非常灵活和强大的功能,可以使我们更好地控制和定制表格的过滤和排序。

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

相关·内容

JQuery 表格插件介绍:Flexigrid 和 DataTables

JQuery 表格插件有很多。Flexigrid 和 DataTables 是我最近使用,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格插件,可以考虑它们。...colModel 属性,它明确了定义,每一展示方式。...比较遗憾地方在于,它只提供了这种基于 row 行表(即表头在第一行),而不支持基于 column 列表(即表头在第一定义和数据集合表示。...DataTables DataTables 相较而言,功能上要多得多了,官方特性展示: 可定制分页 即时数据过滤 多排序 宽自动调整 支持各种数据源 国际化支持 插件支持 表格当前状态保持 ……...而且文档也丰富得多,不过让我不舒服是,API 定义得非常含糊不清(而且方法名和参数 key 都带有一个看起来很别扭 1-2 个字符前缀,用于表示类型),虽然有详尽 API 文档,但是显然不如代码自注释来得好

2.3K20

表格头部固定和表格固定

如果表格只需要单独用来展现数据,那就很简单了,那如果需要实现复杂样式呢?比如说表头固定,当网页滚动时候,表头自动固定到网页顶部,这样很客观展现了每内容。...表头固定和固定,需要用到jQuery DataTables(我不是前端大神,就懒一点,用下框架,偶尔用下框架,开发时间也节省了嘛,嘿嘿 ^_^),没错,又是我前面介绍DataTables,我对这框架是情有独钟啊...表头固定和固定是jQuery DataTables两个独立扩展插件,下面我们就分别说说: 表头固定 1.下载并引入js和css样式扩展 dataTables.fixedHeader.min.js...rightColumns: 1//表格右边固定数 } } ); } ); 大功告成,是不是特别简单啊?...但是有一点要记住,引入这些扩展之前,比如先引入DataTables框架哦!!!

3.3K20

jquery datatables之Requested unknown parameter for row column

jquery datatables是一款应用特别广泛表格js插件,只需进行简单设置就可以运行起来,更多详情可以参考官网:https://www.datatables.net/manual/index..."columnDefs": [ { "targets": 0, "data": "userName", "defaultContent":null } 这是jquery...datatables比较常见配置片段,注意上面标红部分,如果userName属性为null或者undefined,那么表格在绘制过程中就会出现“DataTables warning: table id...column "+colIdx, 4 ); settings.iDrawError = draw; } return defaultContent; } 注意上面蓝色标注部分,这正是我们在设置jquery...datatables column属性时候设置defaultContent,也就是说如果我们设置defaultContent属性为null,那么获取不到该对应属性时就会弹出上面的错误提示,相反如果我们在设置

80310

datatables应用程序接口API

DataTables 提供可以操作表格数据API,有下面六个关键部分: 表格(tables) (Columns) 行(Rows) 单元格(Cells) 核心方法(Core) 工具类(Utilities...) Datatables有一个强大api,用来处理表格上数据,你可以添加数据到已经存在表格,或者对已经存在数据进行操作。...jQuery实例(如果是这个方式初始化Datatables,那么返回对象不能使用api方法,不然会报方法未定义) 核心(Core) 名称 说明 ajax.reload()API 重新加载数据源获取数据...(完成)一个 jQuery 选择器操作 ajax.json()API 获得最终json数据 ajax.params()API 获取最后一次Ajax请求提交参数 ajaxAPI ajax方法命名空间...footer()DT 得到 tfoot节点 tables().header()DT 得到 thead节点 tables().nodes()DT 得到 table节点 tables()DT 得到tablejquery

4.4K30

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

使用场景:不使用Django模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。.../js/jquery.dataTables.min.js' %}" </script <script src="{% static '/bower_components/<em>datatables</em>.net-bs...根据官网<em>的</em>描述<em>DataTables</em><em>的</em>真正威力可以通过使用它提供<em>的</em>API来利用。 关于table2<em>的</em>使用,以后会说明!!!...,第1<em>列</em>是隐藏内容,第2<em>列</em>是行序号,第3<em>列</em>check(用来多选<em>的</em>), 第4,6,7,8<em>列</em>是要显示<em>的</em>信息,第5<em>列</em>是超链接。...第9<em>列</em>是操作按钮(根据自己<em>的</em>选择增加、删除)。 一般情况下,上述内容已经够用了。

4.9K20

dataTable参数说明

无 dom 比较复杂配置项,简言之就是通过一个自定义字符串来定义DataTables里面所有组件显示,位置和显隐....columns.type 通过设置类型让控件在排序和过滤这个是能更好处理这个数据,比如日期,货币等.具体种类很多请参考这里: http://datatables.net/reference...String 无 columns.render 非常有用函数,自定义内容.该属性比较常见用法是函数用法,通过这个函数可以自定义改造任何内容,如果要在中显示比较复杂内容,...这是一个比较选择.比如在中加入功能按钮....settings: 当前DataTables控件setttings对象 Function 无 可以看到,DataTablesOptions设置还是比较全面和丰富,当然Options

4.5K20

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

数据表安装 现在我们需要安装用于创建表格 JQuery DataTables,进入Tools >> NuGet Package Manager >> Manage Nuget Packages for...安装包管理器默认是打开,它会在你解决方案中显示成已安装 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables...在 nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 必要 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...,然后检查所有中是否符合标准数据都返回了。...现在 build 这个工程并在浏览中运行,就可以查看带有服务器端过滤、分页和排序 GridView 了。

5.4K80

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

今天介绍汇总一下datatables。 网址: www.datatables.net 公司CMS内容资讯站后台管理界面用了大量table来管理数据,试用了之后,感觉挺不错,推荐一下。...js有4个,①jquery,②bootstrap3,③datatablesjs,④datatables对应bootstrap样式时用。 为了说明问题,就不放bundle里面了。...src="~/Content/datatables/js/jquery.dataTables.js"> <script src="~/Content/<em>datatables</em>/js/<em>dataTables</em>.bootstrap.js...有2个,①bootstrap3,②<em>datatables</em>对应bootstrap样式(要用这个替换<em>datatables</em>默认<em>的</em>样式,否则会出现右下角<em>的</em>分页样式margin很大<em>的</em>情况。)...编号②中<em>的</em>搜索框是输入内容后自动搜索表格上<em>的</em>所有<em>列</em>(当然可以通过他<em>的</em>api来实现搜索特定<em>的</em><em>列</em>,比如某些隐藏<em>列</em><em>的</em>筛选)。 图如下: ? 通过以上4个控制,基本可以满足大部分table列表<em>的</em>需求。

2.3K20

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

可用库 以下是一些可用库和插件: Grid.Mvc MVCGrid.NET PagedList.MVC JQuery.Grid JQuery Grid for ASP.NET MVC JQuery...DataTables 使用 jQuery 数据表 以上库和插件都有自己优缺点,其中 jQuery 数据表是个不错选择。...它具有高度灵活性,支持分页,即时搜索,多排序;它也支持几乎所有可以被绑定数据源。...安装包管理器默认是打开,它会在你解决方案中显示成已安装 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables...在 nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 必要 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start

6.1K90
领券