React js datatables.net，无法将自定义 html 元素添加到数据表列

Question

我正在使用 SYMFONY + API 平台 + REACT JS。

我从我的 React 组件中的 api 获取数据：

  useEffect(() => {
    document.title = "IIG | Écran d'accueil";

    asyncSecureGetHelper(resource, AUTH_TOKEN)
      .then((response) => {
        setLoading(false);
        setProjects(response.data["hydra:member"]);
      })
      .catch((error) => {
        setLoading(false);
      });
  }, []);

我用项目创建了一个数据表：

var projectsDt = null;

  function projectsDatatable() {
    if (projectsDt !== null) {
      projectsDt.destroy();
    }
    projectsDt = $("#projects_dt_table").DataTable({
      destroy: true,
      searching: false,
      data: projects,
      columns: [
        { data: "reference" },
        { data: "createdAt" },
        { data: "updatedAt" },
        { data: "user" },
        { data: "type" },
        { data: "status" },
        // I NEED TO ADD  SHOW AND EDIT LINKS HERE
      ],
    });
  }

  if ($("#projects_dt_table").length) {
    projectsDatatable();
  }

我想向数据表添加显示和编辑链接。

 columns: [
        { data: "reference" },
        { data: "createdAt" },
        { data: "updatedAt" },
        { data: "user" },
        { data: "type" },
        { data: "status" },
        {
          <a href="link_to_edit"> edit </a>  // i want to add this
        },
       {
          <a href="link_to_showt"> show </a> / i want to add this
        },
      ],

如果有人能帮助我，我将不胜感激。

谢谢

Answer 1

试试这样：

columns: [
    { data: "reference" },
    { data: "createdAt" },
    { data: "updatedAt" },
    { data: "user" },
    { data: "type" },
    { data: "status" },
    { data: null, render: function() {
        return (<a href="link_to_edit"> edit </a>);} 
    },
    { data: null, render: function() {
        return (<a href="link_to_showt"> show </a>);} 
    },
  ],

Answer 2

这个对我有用：

  columnDefs: [
        {
          targets: 0,
          data: "reference",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 1,
          data: "createdAt",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 2,
          data: "updatedAt",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 3,
          data: "user",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 4,
          data: "type",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 5,
          data: "status",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 6,
          data: "id",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
        {
          targets: 7,
          data: "id",
          render: function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
          },
        },
      ],