开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Datatable.js表格中显示“今天”一词，而不是数据格式

在 DataTables.js 表格中显示“今天”一词而不是数据格式，通常是为了在特定列中显示当前日期，而不是数据库中的原始日期数据。这可以通过使用 DataTables.js 的 columns.render 功能来实现。

基础概念

DataTables.js 是一个高度灵活的工具，基于 jQuery 构建，用于处理 HTML 表格的显示、分页、排序和过滤。columns.render 是一个选项，允许你自定义单元格的内容。

相关优势

灵活性：可以根据需要自定义单元格内容。
用户体验：可以显示更友好的信息，如“今天”而不是原始日期。
动态内容：可以动态生成内容，如实时显示当前日期。

类型

columns.render 可以接受三种类型的函数：

Function：用于自定义渲染逻辑。
Array：用于处理多种数据类型。
Boolean：用于控制是否显示原始数据。

应用场景

在需要显示当前日期的列中使用，例如显示“今天”的订单数量。

实现方法

以下是一个示例代码，展示如何在 DataTables.js 表格中显示“今天”一词：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTables.js Example</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>2023-04-25</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>2023-04-26</td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "columns": [
                    { "data": "name" },
                    {
                        "data": "date",
                        "render": function(data, type, row) {
                            var today = new Date();
                            var date = new Date(data);
                            if (date.toDateString() === today.toDateString()) {
                                return "今天";
                            } else {
                                return date.toLocaleDateString();
                            }
                        }
                    }
                ]
            });
        });
    </script>
</body>
</html>

解决问题的步骤

引入必要的库：确保引入了 jQuery 和 DataTables.js 的库文件。
定义表格结构：创建 HTML 表格结构。
初始化 DataTables.js：使用 $(document).ready 初始化 DataTables.js，并在 columns.render 中定义自定义渲染逻辑。
自定义渲染逻辑：在 render 函数中，检查日期是否为今天，如果是则返回“今天”，否则返回原始日期。

参考链接

DataTables.js 官方文档

通过这种方式，你可以在 DataTables.js 表格中显示“今天”一词，而不是原始的日期数据格式。

相关搜索:WPF中的DatePicker显示为01.01.0001，而不是今天验证表格展开箭头显示在左侧而不是右侧逐字突出显示表格中的文本，而不是整个范围在telerik Grid中显示日期而不是DateTime 在NumericUpDown控件中显示"00"而不是"0"在Rails中，如何显示名称而不是id？在列而不是行中显示SPARQL输出 iFrame代码显示在页脚而不是节中在显示中获取[object HTMLInputElement]而不是数字在woocommerce中显示小图而不是大图重要注释合并，而不是在R中单独显示在单列中显示地址，而不是在自己的列中显示每行地址在datejs中，toString('h')在午夜显示0而不是12 SQL count show group by显示在列中而不是行中如何让数字显示在警告框中而不是NAN中在DetailView Yii2中显示名称而不是ID 在BIRT报告中显示空白而不是0或0.0 在FullCalendar中显示06:00而不是6am 在PhilJay的MPAndroidChart中显示整数值而不是小数？如何从集合中显示用户名而不是在烧瓶中显示表单？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

非典那年记忆

ABP core 的框架在过年期间，从1.0突然升级到2.0了，。整个ABPCore 虽然版本变化大，但使用流程基本不变吧，我看官网上文档基本完毕了，官网文档有一个外国人视频，当时版本尚是0.18，总共有2小时吧。记录个学习笔记吧！

02

基于iView的列表组件封装

封装的好处多多，代码便于维护、减少代码量、减少BUG 前台封装以前没有尝试过，这回试试，哈哈目录 1、列表组件封装 2、树组件封装 3、下拉框组件封装 4、上传组件封装列表组件的API 属性说明类型默认值 url 请求列表数据的地址必填 String 无 pagingOption 列表底部是否显示分页信息及总数，有两个配置项 showPaging、showTotal Object 显示分页及总数信息 cols 列定义必填 Array 无 height 列表高度选填 Number 500 ch

02

JS一些插件收集

2017-10-30更新 Blueimp jquery相册插件 http://blueimp.github.io/Gallery/ bootstrap-markdown bootstrap的markdown插件 http://www.codingdrama.com/bootstrap-markdown/ bootstrap-tagsinput bootstrap的标签添加与删除插件 http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/exa

03

dataTables 使用ajax 和服务器处理获取数据

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。官网：https://datatables.net/ 中文网：https://datatables.club/

03

如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)

最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下:

03

Jquery Datatable的使用样例（ssm+bootstrsp框架下）服务器端分页

返回的参数：recordsTotal、recordsFiltered 都是结果集总记录数。data：结果集。draw：原样返回。

02

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

使用场景：不使用Django的模版语言进行分页（网上大多数都使用该方式），使用Jquery DataTable.js 插件进行分页处理。

02

Google Earth Engine（GEE）——图表概述（准备数据）

所有图表都需要数据。Google Chart Tools 图表要求将数据包装在名为google.visualization.DataTable. 此类在您之前加载的 Google Visualization 库中定义。

01

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

之前我已经简单介绍了这款插件，我把此类文章归类为“Web前端”，不是很正确，这款神奇的插件不仅支持客户端，也支持服务器端。通过ajax向服务器请求json数据，并展示到表格中。下面我们就来简单使用一下。

02

4个免费数据分析和可视化库推荐

人脑以这样的方式工作，即视觉信息比文本信息更好地被识别和感知。这就是为什么所有营销人员和分析师使用不同的数据可视化技术和工具来使枯燥的表格数据更加生动。他们的目标是将原始的非结构化数据转换为结构化数据，并将其意义传达给参与决策过程的人员。

02

datatables 配套bootstrap3样式使用小结（1）

公司CMS内容资讯站的后台管理界面用了大量的table来管理数据，试用了之后，感觉挺不错，推荐一下。

02

Django框架学习笔记（六）模板语言DTL

作为一门web框架，Django需要一种便利的方法来动态地生成html。常见的做法是使用模板，模板中包含了HTML静态内容和动态标签。

04

学习layui分享

(adsbygoogle =window.adsbygoogle ||[]).push({});

02

在Web站点中创建和使用Rss源

Rss是将你Web站点的内容与其他人分享的标准方式。Rss代表着：Really Simple Syndication。它不过是一个标准化的XML标记，用于描述你想要分享的内容。因此Rss是一个在你的内容准备好被其他用户所消费时被广泛接受的格式。一些使用Rss的范例站点有：www.asp.net、weblogs.asp.net 和 www.dotnetbips.com 。Dotnetbips.com 通过 Rss 发布新添内容的列表，这个列表可能会被其他的站长放置在他们的站点或目录中。

02

【8】数据浏览表格的快速输出

阅读目录用什么来展示数据列表？表格还是列表？表头对表格输出的封装生成表格的实例功能的扩展在页面数据和控件的自动交换机制中，我们通过PageX实现了一种快速的控件和数据交换机制，能够方便快捷地完成数据库中的数据记录的管理。一般情况下，在进入这个编辑页面之前，还应该有另外一个页面，可以一次展示多条数据记录的信息。在这个数据的列表界面中，可以进行各种操作，如删除、跳转、编辑等。这个数据列表页面不仅可以按照数据库的分类展示数据，也可以根据需要进行展示，如按指定字段排序、根据查询结果展示、分

05

datatables使用教程

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

JQuery表格插件DataTable的使用

DataTable是基于JQuery的表格插件，提供了丰富的功能。下面简要说明其用法。

05

前端: 如何让你的Table组件无限可能

一般我们渲染表格, 大多数是预先将表格结构写好, 比先定义好columns再向后端请求数据填充表格, 如下:

01

Datatables表格插件，你用过吗？

分页，即时搜索和排序几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API 支持国际化超过2900+个单元测试免费开源（ MIT license ）！商业支持更多特性请到官网查看英文官网地址中文官网地址点击导航栏 ->手册->安装安装教程地址

03

datatables 配套bootstrap样式使用小结（2） ajax篇

上一篇是介绍一下基本的用法，基本的原理是取出所有的数据，然后调用$.datatables(option)方法格式化，这种方法显然不太科学，所以ajax方式是必须的。

01

固定表头和左侧列的表格插件DataTable 原

由于表格比较长客户要求左侧的部分列要固定，以及头部固定，并有搜索排序功能，找了好久终于找到一个比较好的插件，DataTable,网站：https://datatables.net/download/index，由于我用的是bootstrap风格的，就下载同样风格的DataTable样式，主要有3个样式文件

01

C# excel转换Json

参考案例：https://www.cnblogs.com/fengxiang/p/3551621.html

01

《Build the BookStore Application using the ABP vNext web application framework》笔记

ABP core 的框架在过年期间，从1.0突然升级到2.0了，。整个ABPCore 虽然版本变化大，但使用流程基本不变吧，我看官网上文档基本完毕了，官网文档有一个外国人视频，当时版本尚是0.18，总共有2小时吧。记录个学习笔记吧！

03

一个页面搞定几乎所有的列表需求的实现思路和一点代码。

其实如果要单独实现一个能够显示数据的表格，那么是很简单的，写一个for循环，把DataTable里面数据循环出来就OK了。相信大家都会做吧，如果是从asp走过来的应该更不陌生吧。上一篇说了，我们要根据表里面的记录来确定显示哪些列，哪一列在前，哪一列在后。那么怎么做呢？我们先定义一个类来存放这些信息。 public class GridColumnsInfo { public int ColumnID = 0; public string Co

08

爬虫里总要用到的 JSON 是什么？

JSON作为目前Web主流的数据交换格式，是每个IT技术人员都必须要了解的一种数据交换格式。尤其是在Ajax和REST技术的大行其道的当今，JSON无疑成为了数据交换格式的首选！

02

stimulsoft oracle,报表仪表设计器Stimulsoft的处理数据功能

Stimulsoft Reports.Net是一个基于.NET框架的报表生成器，能够帮助你创建结构、功能丰富的报表。StimulReport.Net的报表设计器不仅界面友好，而且使用便捷，能够让你轻松创建所有报表；该报表设计器在报表设计过程中以及报表运行的过程中都可以使用。在运行时使用StimulReport.Net 的报表设计器不需要支付任何的专利费用。

02

Python面试简历分享。

分享前一段我的python面试简历，自我介绍这些根据你自己的来写就行，这里着重分享下我的项目经验、公司职责情况（时间倒序），不一定对每个人适用，但是有适合你的点可以借鉴

04

Python Datatable：性能碾压pandas的高效多线程数据处理库

现代机器学习为了更精确地构建模型需要处理大量数据。大量数据的处理对于时间的要求有了很大的挑战，在Python提供很多数据处理的函数库，今天给大家介绍一个高效的数据处理函数库Python Datatable。它是一个用于以最大可能的速度在单节点机器上执行大数据（超过100GB）操作的函数库。DAtatable库与Pandas库非常类似，但更侧重于速度和大数据支持，Python datatable还致力于实现良好的用户体验，明确的错误提醒和强大的API。在本文中，我们将比较一下在大型数据集中使用Datatable和Pandas的性能。

02

Unity手游实战：从0开始SLG——本地化篇（五）服务器下发配置

前面几篇文章已经聊过了本地化和多语言的一些基本处理方法。文本、字体、图片、以及语音翻译等等。文本、字体已经讲完，图片因为TMP可以自己产生艺术字效果，所以归于文本一类。基于以上的实现之后，项目已经能够胜任大部分的本地化策略了，但是也仅限于在所有资源都已经预置了的情况下，那么这篇我们就来聊一下基于热更的实现。让多语言文本能够在上线后，也能在服务器的控制下解决多语言的显示问题。

03

jquery dataTable 的学习之初始化插件（一）

最近用到了一个比较实用的jquery插件--jquery dataTable，这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

01

JQuery 表格插件介绍：Flexigrid 和 DataTables

JQuery 的表格插件有很多。Flexigrid 和 DataTables 是我最近使用的，并且功能比较强大，在这里介绍一下。如果你在寻找前端绘制表格的插件，可以考虑它们。

02

Salesforce LWC学习(十八) datatable展示 image

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

02

【愚公系列】2023年11月 Winform控件专题 DataGridView控件详解

Winform控件是Windows Forms中的用户界面元素，它们可以用于创建Windows应用程序的各种视觉和交互组件，例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为，从而创建功能强大的桌面应用程序。

01

基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）

基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）

03

asp.net采用OLEDB方式导入Excel数据时提示:未在本地计算机上注册"Microsoft.Jet.OLEDB.4.0" 提供程序"

笔者在项目中做做了一个从Excel表格中导入数据的模块、大体上asp.net项目中导入Excel大体分成三类：

01

记录解决几个前端小问题的过程

今天的主要工作都在用react.js写一些前端界面，中间遇到了一些问题，这里解决这些问题的过程记录一下。使用echarts图表组件由于项目比较老旧，并没有使用webpack、gulp之类的前端编译工具进行编译，而是直接将依赖的javascript库引入，如下所示： <body>

<script type="text/javascript" src="${ctx}/script/lodash/lodash.min.js"></script> <sc

06

一款脑洞大开的表格可视化神器

今天跟大家介绍一款任坤大神写的新包——formattable。这个包的功能很简单，但是却很具创意性，它颠覆了R语言data.frame数据表的呈现方式，允许在表格内自定义视觉化元素，比如对某一列数据进行字号、颜色、背景、以及图形化处理，整体的版式仍然保留表格的样式，但是已经具有了表和图结合的意味。关于数据框的呈现方式，R语言内目前较好的自定义呈现方式是谢益辉大神的DT包，可以将静态表格动态化，进行切片、索引、排序操作。 devtools::install_github("renkun-ken/form

08

表格头部固定和表格列固定

我不是前端大神，只是偶尔在开发系统时，需要用到表格。如果表格只需要单独的用来展现数据，那就很简单了，那如果需要实现复杂的样式呢？比如说表头固定，当网页滚动的时候，表头自动固定到网页顶部，这样很客观的展现了每列的内容。

02

用Python轻松开发数据库取数下载工具

这是我的系列教程「Python+Dash快速web应用开发」的第十四期，在前两期中，我们针对dash_table的自定义样式、前后端分页、单元格内容编辑等特点展开了介绍。

02

（数据科学学习手札117）Python+Dash快速web应用开发——交互表格篇（下）

这是我的系列教程Python+Dash快速web应用开发的第十四期，在前两期中，我们针对dash_table的自定义样式、前后端分页、单元格内容编辑等特点展开了介绍。

02

函数周期表丨其他丨表丨DATATABLE

可能从名称上看，小伙伴差不多能猜到这个函数的用途，其作用有点类似于其他编程语言中的创建语法，可以添加新的数据。

04

Bootstrap快速上手（一）----右键菜单

一款软件，除了稳定，功能强大，用户体验也很重要。界面风格和布局的一致性让人在视觉上感觉到这是一个统一的系统，协调的系统，至于采用什么风格及颜色系统，美工和设计人员起决定作用。对大部分开发人员来说，要设计出良好的系统界面不是件容易的事，特别是在色彩上。

01

React Native 表格组件

npm install--save react-native-data-table

03

C# NOPI 项目实战(经典)(可下载项目源码)

这篇文章主要介绍了如何安装NPOI，以及NPOI具体如何使用，并且用具体实例介绍了excel导入到datagridview以及 datagridview如何导出到excel并保存。如果不清楚这块的去我公众号去搜索这篇文章阅读。

02

译文｜数据建模有新招！

本文由CDA数据分析研究院翻译，译者：王晨光，转载必须获得本站、原作者、译者的同意，拒绝任何不表明译者及来源的转载！在过去的三十年，ERP，CRM和Analytical等分析系统已经发展。但是这些系统储存数据的方式并没有变化。事实上，在这三十年，ERP，CRM和分析系统存储数据的方式没有任何改变。一般来说，现代的ERP和CRM系统是基于一个已经用了30多年的数据模型，这个模型叫作OLTP，代表的是On Line转换程序。一般来说，现代Analytical系统是基于一个已经用了30多年的数据模型，叫OL

06

C# 处理Word自动生成报告三、设计模板

既然是模板就少不了各种标记和配置. 这里主要用到了word的书签功能. 打开word按ctrl+shift+F5, 打开书签功能如下图如果所示, 可以选中word中的一个区域然后按ctrl+shi

05

Jquery DataTable 的学习之基础配置（二）

本文将介绍jquery DataTable的一些基础配置，如分页、排序、过滤等，代码如下

01

Salesforce LWC学习(四十四) Datatable 显示日期类型的有趣点思考

背景：项目中经常用到datatable显示日期类型字段，并要求日期类型字段基于指定格式显示。这种是一个很常见的需求，而且demo很容易找到，无论是官方文档中还是网上。这里列一个简单的demo，因为apex只是获取数据比较简单，这里不做显示，只列出关键内容。

03

数据湖搭建指南——几个核心问题

自 2010 年首次提出“数据湖”一词以来，采用数据湖架构的组织数量呈指数级增长。它们支持多种分析功能，从数据的基本 SQL 查询到实时分析，再到机器学习。

02

「Geek-r」数据导入

在掌握一定的 R 编程技能后，我们开始迈入数据分析的殿堂。大部分数据分析事务的数据都不是通过 R 创建，而是来自于各种数据收集软硬件、渠道，包括 Excel、网络等。本章聚焦于如何将数据导入 R 中以便于开始数据分析。对于本章的内容，读者既可以系统地从头到尾深入阅读学习，也可以根据自己实际工作需要或时间限制选择一些重点或感兴趣内容进行掌握。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭