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

如何让jQuery DataTables对隐藏值进行排序,但搜索显示的值?

在jQuery DataTables中,要让隐藏值进行排序,但搜索显示的值,可以使用以下方法:

  1. 使用columnDefs属性定义列的排序和搜索方式。
  2. columnDefs中,使用orderData属性指定排序所依据的列索引。
  3. 使用searchable属性设置列是否可搜索。
  4. 使用visible属性设置列是否可见。

下面是一个示例代码:

代码语言:javascript
复制
$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [
            { targets: [0], orderData: [0, 1] }, // 指定第一列排序依据为第一和第二列
            { targets: [1], searchable: false }, // 设置第二列不可搜索
            { targets: [2], visible: false } // 设置第三列不可见
        ]
    } );
} );

在这个示例中,我们将第一列的排序依据设置为第一和第二列,将第二列设置为不可搜索,将第三列设置为不可见。这样,在排序时,将根据第一和第二列的值进行排序,但搜索时,只会显示第一列的值。

推荐的腾讯云相关产品:

  • 腾讯云数据库:提供MySQL、PostgreSQL、MongoDB等多种数据库服务,可以满足不同应用场景的需求。
  • 腾讯云服务器:提供弹性云服务器、负载均衡、CDN等服务,可以帮助用户更好地管理和运维自己的应用。
  • 腾讯云云原生:提供Kubernetes、容器服务等服务,可以帮助用户更好地实现容器化和微服务化。

产品介绍链接地址:

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

相关·内容

datatables应用程序接口API

Datatables有一个强大api,用来处理表格上数据,你可以添加数据到已经存在表格,或者已经存在数据进行操作。...).search()DT 在指定列搜索 column().visible()DT 获得那些列隐藏或者设置指定列隐藏 column()DT 在表格上选择一列 column.index()DT Convert...columns().search()DT 在指定列搜索 columns().visible()DT 得到隐藏列或者设置隐藏列 columns()DT 从表格选择多列 columns.adjust()DT...remove()DT 删除子行 row().child().show()DT 显示子行 row().child()DT 获取子行或者设置子行 row().child.hide()DT 隐藏子行 row(...sort()DT 结果集进行排序 splice()DT 结果集进行分割 to$()DT 转为jquery实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT

4.4K30

jquery.datatables 分页功能

在后端不管是使用什么技术,按下面API中参数封装对象即可,分页,排序搜索都不需要手动去维护这些信息,方便、方便、太方便!...为了解决这个DataTables服务器端处理功能,提供了一种方法,服务器端数据库引擎完成所有的“繁重操作”(对于这个用例,它们都是高度优化),然后有在用户网络浏览器中绘制信息。...因此,您可以轻松地显示由数百万行组成表。 当使用服务器端处理时,DataTables将在页面上每个绘图(即分页,排序搜索等)时向服务器发出一个Ajax请求。...' } ); 通过该ajax选项配置DataTables如何配置Ajax请求。...作为一个对象,ajax直接映射到jQueryajax配置对象,所以任何可以在jQuery请求中使用选项,你也可以使用DataTables

4.8K20

jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索大表格进行分页,对表格进行滚动,拖放操作等等。...graphTable - 借助 flot 将 HTML 表格中内容变成图形(演示)。 ? ? DataTables - 非常强大 jQuery 表格插件,可变宽页码浏览,现场过滤。...Grider - 一个简单 jQuery 插件,可以对 HTML 表格进行计算,平均,累加,最大,最小等。 ? 表格功能增强 ?...HeatColor - 根据规则,或自动对表格中进行分析,不同范围按不同颜色区分。 ? ? Fixed Header Table - 固定表头可滚动表格 ? 表格搜索,筛选 ?...Quicksearch - 简单搜索功能 jQuery 现场编辑 ?

7.4K10

datatables使用教程

分页,即时搜索排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...原理介绍 table进行渲染,前提table数据源得有,如上面的是HTML页面本来就有一定数据了,所以可以直接调用函数进行渲染; 但是在大多数情况下,项目开发并不会采用这种做法,而是要结合服务端,...(排序时候,数据很多耗费时间长的话,也会显示这个) lengthChange: true,//是否允许用户改变表格每页显示记录数 orderMulti: true, //启用多列排序...(排序时候,数据很多耗费时间长的话,也会显示这个) lengthChange: true,//是否允许用户改变表格每页显示记录数 orderMulti: true, //启用多列排序...(排序时候,数据很多耗费时间长的话,也会显示这个) lengthChange: true,//是否允许用户改变表格每页显示记录数 orderMulti: true, //启用多列排序

7.1K20

动图展示 60+ 个前端常用插件库合集

jQueryJavaScript函数库,目的是强化表格操作(如搜索排序),并自动加入组件引入表格中,使用非常灵活简便。...Muuri.js 官网:Muuri Muuri是一个JavaScript Layout引擎,你可以构建多样化Layout,并具有响应式、可排序、可过滤、拖拽移动或动画效果。...List.js-资料排序 官网:List.js Github:list.js List.js对表格、清单、各式各样对象,增加搜索排序、过滤和灵活性,无形地建立在HTML内,极简易也易于使用。...即便周边不如DataTables,但不依赖jQuery及大小仅Datatables1/4(压缩后17KB),以及IE高兼容性和不止、或是其他HTML元素支持,...ScrollReveal-动态显示内容 官网:ScrollReveal datedropper 官网:datedropper Github:datedropper datedropper是微型功能强大

6.5K40

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

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...paging: true,//分页 ordering: true,//是否启用<em>排序</em> searching: true,//<em>搜索</em>...info: "总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",//左下角信息显示,大写词为关键字。...编号②中搜索框是输入内容后自动搜索表格上所有列(当然可以通过他api来实现搜索特定列,比如某些隐藏筛选)。 图如下: ? 通过以上4个控制,基本可以满足大部分table列表需求。

2.4K20

Yii2开发简单日程管理后台

如图所示 特点 使用RBAC权限管理,所有操作基于权限控制 视图使用JS控制,数据显示使用jquery.DataTables 基于数据表增、删、改、查都有封装,添加新数据表操作方便 安装 提示:...index.php (项目根目录下index.php)进行数据库数据导入 配置虚拟机,设置路径为 bacekend/web/ 下,配置好路由重写 后台默认超级管理员账号:super 密码:admin123...管理员账号:admin 密码:admin888 使用说明 基本操作权限(以管理员操作为例): admin/index (显示管理员页面 + 左侧导航显示) admin/search (管理员数据显示表格数据显示...select 提供数据源,格式为一个对象 {"": "显示信息"} * ------ search 搜索表单配置(不配置不会生成查询表单), type 类型支持 text, select 其他可以自行扩展...设置默认排序方式(有"ace", "desc") * ------ isHide 该列是否需要隐藏 true 隐藏 * 其他配置查看 meTables 配置 */ // 自定义表单处理方式 meTables.extend

1.5K20

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

使用场景:不使用Django模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。.../js/jquery.dataTables.min.js' %}" </script <script src="{% static '/bower_components/<em>datatables</em>.net-bs...searching: false,//<em>搜索</em> ordering: false,//是否启用<em>排序</em> bProcessing: true, //是否<em>显示</em>加载 sAjaxSource:...开启此模式后,你<em>对</em><em>datatables</em><em>的</em>每个操作 每页<em>显示</em>多少条记录、下一页、上一页、<em>排序</em>(表头)、<em>搜索</em>,这些都会传给服务器相应<em>的</em><em>值</em>。...item.status, "createTime": item.createTime.strftime('%Y-%m-%d %H:%M:%S')} data.append(row) #最终数据进行排序

4.9K20

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

通过前文,我们已经了解到使用 jQuery 插件数据表可以很容易地实现具有搜索排序和分页等重要功能表格。 ?...介绍 在本文中,我们将会学习如何实现服务器端分页,搜索排序功能。从长远来讲,这是一种更好方式来应对数据集特别大情况。 我们将会修改前文中源代码,现在就开始吧!...安装包管理器默认是打开,它会在你解决方案中显示成已安装 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables...安装包管理器默认是打开,它会在你解决方案中显示成已安装 nugget 包,点击浏览按钮,然后搜索 DataTables.mvc5,选择它并检查想要安装这个包项目解决方案。...在服务器端实现表格过滤、分页和排序等功能,能够减少客户端数据处理任务量,方便更好更快加载并显示数据。

5.4K80

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

服务器端和客户端有许多可用第三方库,这些库能够提供所有必需功能,如 Web 表格中搜索排序和分页等。是否包含这些功能,取决于应用特殊需求,例如在客户端和服务器端提供搜索或其它功能需求等。...它具有高度灵活性,支持分页,即时搜索,多列排序;它也支持几乎所有可以被绑定数据源。...例如: DOM JavaScript Ajax Server-side processing 我最喜欢选项之一是, jQuery 数据表不但支持客户端搜索、分页、排序等,而且还提供了一个可以在服务器端处理选项...安装包管理器默认是打开,它会在你解决方案中显示成已安装 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables...在下一篇文章中,我们将会学习到如何通过使用服务器端分页、排序和过滤来使页面呈现更好。对于具有大量数据时,这是一个更好方法。

6.1K90

jquery datatable 参数

以下是在进行dataTable绑定处理时候可以附加参数: 属性名称 取值范围 解释 bAutoWidth true or false, default true 是否自动计算表格各列宽度 bDeferRender...or false, default true 开关,是否显示表格一些信息 bJQueryUI true or false, default false 是否使用jquery ui themeroller...当这个标志为true时候,分页器就默认关闭 bSort true or false, default true 开关,是否各列具有按列排序功能 bSortClasses true or false,...DataTable设置为滚动时,最多可以一屏显示多少条数据 oSearch 默认{ "sSearch": "", "bRegex": false, "bSmart": true } 又是初始时指定搜索参数相关...1.object:oSettings - DataTables settings object Boolean 无 用于在开始绘制之前调用,返回false的话,会阻止draw事件发生;返回其它,draw

19510

网站搭建-django-学习成绩管理-09-查询成绩之前端实现

语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3.2 Django:2.1.4 Python:3.6.0 本系列介绍如何搭建一个网站...,后端使用django框架 今天开始介绍一个单独项目app,关于学生成绩管理网站搭建 主要功能包括: 学习成绩查询,数据统计分析 涉及前端模块: Datatables、ECharts、JQuery...Part 2:代码逻辑 前端 获取页面中输入条件信息(JQuery) 将前端信息传入后端(Ajax) 后端查询结果传入前端,显示出表格(Datatables) 后端 获取前端传递信息(json.loads...js部分:通过Datatables模块实现表格显示效果,只需要定义columns,即每列显示字段,其余部分可以保持不变 Datatables功能非常强大,本文实现了排序、着色效果 $('#btn-search..."bFilter": true, //列筛序功能 "searching": true,//本地搜索 "ordering": true, //排序功能

1.8K30

这个库Pandas数据框互动起来了!

刚刚发布 ITables 2.0 增加了 DataTables 扩展库支持。...有了 DataTables,可以更轻松、更全面地访问数据。可以展开表格,浏览不同页面,对数据进行排序,甚至搜索数据,而无需返回 Python 提示符。..."]) The Copy/CSV/Excel buttons 级联搜索 SearchPanes[4]扩展可以对有重复进行快速、直观搜索: SearchPanes 扩展 搜索生成器 我觉得SearchBuilder...此外,我还喜欢设置预定义搜索并只显示我们想关注数据集部分选项。 SearchBuilder扩展 下采样 最后我需要介绍一下 ITables 下采样[6]机制。...显示 1G DataFrame 至少会notebook 变得同样大(由于数据已导出为 JSON,所以可能会更大),而且目前还不清楚浏览器是否支持。

9410

动手实践:美化 Jenkins 报告插件用户界面

这是一个高度灵活工具,建立在逐步增强基础上,可将所有这些高级功能添加到任何 HTML 表中: 上一页,下一页和页面导航 通过文本搜索过滤结果 一次按多列对数据排序 DOM、Javascript、Ajax...您可以下载插件内容,并详细了解如何在实践中使用这些新组件。或者,您可以更改此插件,只是为了了解如何这些新组件进行参数设置。...使用此基于 JS 表控件可免费提供其他功能: 通过文本搜索过滤结果 提供结果集分页 一次按多列排序数据 使用 Ajax 调用获取表行 根据屏幕分辨率显示隐藏列 为了在视图中使用 DataTables...静态 HTML 内容表格 使用 DataTables 最简单方法是创建一个静态 HTML 表格,只需调用 datatable 构造函数即可对其进行修饰。...您可以在一个图表中显示多条线,可以显示堆叠,甚至可以显示某些之间差异。您也可以查看 charts of the warnings plugin,了解其中一些功能。

6K10

这个库Pandas数据框互动起来了!

有了 DataTables,可以更轻松、更全面地访问数据。可以展开表格,浏览不同页面,对数据进行排序,甚至搜索数据,而无需返回 Python 提示符。..."]) The Copy/CSV/Excel buttons 级联搜索 SearchPanes[4]扩展可以对有重复进行快速、直观搜索: SearchPanes 扩展 搜索生成器 我觉得SearchBuilder...此外,我还喜欢设置预定义搜索并只显示我们想关注数据集部分选项。 SearchBuilder扩展 下采样 最后我需要介绍一下 ITables 下采样[6]机制。...向下采样时,只有一部分数据被传递到 DataTables,因此搜索或数据导出功能只能访问这部分数据集。 向下采样是 ITables 快速运行关键。...显示 1G DataFrame 至少会notebook 变得同样大(由于数据已导出为 JSON,所以可能会更大),而且目前还不清楚浏览器是否支持。

18910
领券