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>';
          },
        },
      ],