DataTable中JSON格式日期转换集成失效问题

嘿，我知道你现在遇到的麻烦——那段在其他地方好好的日期转换代码，一放到DataTable里就罢工了对吧？其实问题出在你处理数据的方式上，咱们一步步来解决：

先说说你原代码的问题 #

你在map遍历数据时，直接往返回的对象里塞了一个匿名函数，这可不行！DataTable接收的data必须是纯JSON格式的对象数组，对象里不能包含函数，而且你的列配置里也没对应这个函数的列，所以这段转换代码根本没机会执行。

给你两种靠谱的解决方案 #

方案1：提前把日期转好再给DataTable #

在遍历数据的时候，直接把原始的JSON日期字符串转换成你要的格式，这样DataTable拿到的就是现成的格式化字符串，直接渲染就行：

import $ from 'jquery';
import admissData from '../JSON/admiss.json';
import DataTable from 'datatables.net';

function loadAdmiss() {
  // 先整个通用的日期转换函数，复用起来方便
  function formatJsonDate(jsonDate) {
    // 提取时间戳
    const timestamp = parseInt(jsonDate.replace(/(^.*\()|([+-].*$)/g, ''));
    const date = new Date(timestamp);
    // 转成"January 1, 2000"这种格式，用Intl.DateTimeFormat更专业
    return new Intl.DateTimeFormat('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    }).format(date);
  }

  let admissText = admissData.d.results.map(val => ({
    "Info": val.info,
    "Date of Admission": formatJsonDate(val.dateofadmission), // 这里直接转换
    "Expires": val.expires
  }));

  // 渲染表格
  $('#admissions-table').DataTable({
    columns: [
      { data: "Info" },
      { data: "Date of Admission" },
      { data: "Expires" }
    ],
    data: admissText,
    // 其他配置项...
  });
}

方案2：用DataTable自带的render函数实时转换 #

如果不想改动原始数据结构，也可以在列配置里用render回调来处理日期，这也是DataTable官方推荐的处理方式：

import $ from 'jquery';
import admissData from '../JSON/admiss.json';
import DataTable from 'datatables.net';

function loadAdmiss() {
  let admissText = admissData.d.results.map(val => ({
    "Info": val.info,
    "Date of Admission": val.dateofadmission, // 保留原始日期字符串
    "Expires": val.expires
  }));

  $('#admissions-table').DataTable({
    columns: [
      { data: "Info" },
      { 
        data: "Date of Admission",
        render: (data) => {
          // data就是原始的"/Date(1523260800000)/"字符串
          const timestamp = parseInt(data.replace(/(^.*\()|([+-].*$)/g, ''));
          const date = new Date(timestamp);
          return new Intl.DateTimeFormat('en-US', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
          }).format(date);
        }
      },
      { data: "Expires" }
    ],
    data: admissText,
    // 其他配置项...
  });
}

额外小提示 #

用Intl.DateTimeFormat比手动拼接getMonth()+1这种方式靠谱多了，它能自动处理月份名称本地化、日期补零这些细节，不用自己写一堆判断逻辑。

内容的提问来源于stack exchange，提问作者Bodrov