使表元素(来自JSON)可链接

时间:2019-01-23 23:12:00

标签: javascript jquery json datatables

我有一个JSON文件,其中包含文档标题和每个URL的URL。到目前为止,我已经能够将每个文档呈现到使用DataTables.创建的表中,并且还将每个URL呈现到表的第一行中作为测试。他们出现很好,但这不是我要的。

如何使每个文档标题与各自的URL链接?我没有看到任何信息。在DataTables手册或其论坛中对此进行了介绍,所以我想问一下。

如果您想查看JSON文件的摘要,请告诉我。

JS代码段:

import $ from 'jquery';

import JSONfile from '../../../public/JSONfile.json';
import { basename } from 'path';

import dt from 'datatables.net';

var tableRes = '';

    export default class {
        constructor() {
            this.loadTableData();
        }

 loadTableData() {
    $.noConflict();
    let tableRes = JSONfile.d.results.filter(function(val) {
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {

      return {
        // "FileName": obj.FileLeafRef,
        // "Path": obj.EncodedAbsUrl, ///// these are the URLs for each document
        "Titles": obj.File.Name
        }
      });

    $('#km-table-id').DataTable( {
      columns: [
        { "data": " " },
        { "data": "Titles" }, ///// Ideally I want each Title to be linked in the table---i.e. the document names appearing blue
        { "data": " " }
      ],
      data: tableRes,
      "pagingType": "full_numbers"
    });

 } // ------- loadTableData

} // ------- export default class

1 个答案:

答案 0 :(得分:0)

更新:多亏了DataTables论坛上的用户,我才能够找到解决方案。简而言之,我不得不使用columDefs section of the docs下详细介绍的columns.render

代码段:

      return {
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name
        }
      });

    $('#km-table-id').DataTable( {
      columns: [
        { data: "Path" }, // populates rows with each document link
        { data: "Titles" }, // populates rows with docs
        { data: "check" }
      ],
      columnDefs: [ {
        targets: 0,
        data: "Path",
        render: function(data) {
          return '<a href="'+data+'">Download</a>';
        }
      }],
...

超链接实际文档单元格:

 columnDefs: [
        {
          data: "Path",
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [] // Column position
        },
...