数据表可点击值答案

【问题标题】：datatables Clickable value数据表可点击值
【发布时间】：2017-09-28 09:32:39
【问题描述】：

我正在使用具有数据源和动态列的数据表，这对我来说很好，我正在寻找的是如何使数据表中的第二个值可点击。

示例：我希望“Saudi Government Sukuk”这个值是可点击的。

这里是JS代码

$.fn.dataTable.ext.errMode = 'throw';
var table = $('#' + $('.bondsListTable').attr('id')).DataTable({
    dom: 'Bfrtip',
    buttons: [
        { extend: 'copy', className: 'btn-sm' },
        { extend: 'csv', className: 'btn-sm' },
        { extend: 'excel', className: 'btn-sm' },
        { extend: 'pdfHtml5', className: 'btn-sm' },
        { extend: 'print', className: 'btn-sm' },
    ],
    //"serverSide": true,
    //"processing": true,

    "paging":true,
    data: e.detail.data,
    columns: e.detail.columns,
    responsive: {
        details: { 
            type: 'column'
        }
    },
    "initComplete": function(settings, json) {
        HandleDatatableSearchBar();
        HandleDt_Buttons();
        GenerateShowAndHideCols(e.detail.columns);
        ShowHide();
    }
});

数据源数组示例

  [
    ["", "Saudi Government Sukuk", 1, "June 30, 2017", "Kingdom of Saudi Arabia", "N/A", "0", "Murabaha", "Saudi Arabia", "Announced", "N/A", 0, "N/A", "Projects ", "Domestic", "xssw21", "0", "0", "Sovereign ", "N/A", "N/A", "N/A", "Saudi Arabia", "Financial Services", "N/A", "has Prices", "N/A", "kingdom of Saudi Arabia"],
    ["", "MAR", 1, "April 30, 2017", "MAR SUKUK LIMITED", "N/A", "0.50 B", "Wakalah;Mudarabah", "Egypt", "Announced", "Irish SE", 0, "N/A", "Real Estate,Financial Portfolio", "International", "XS5155487155FK", "0.50 B", "0.50 B", "Corporate", "N/A", "N/A", "N/A", "Qatar", "Islamic Banks", "N/A", "No Prices", " moodys A1", "Masraf Al Rayan"],
    ["", "AlKifah", 1, "April 30, 2017", "Not Disclosed", "April 30, 2022", "0.75 B", "Murabaha;Mudarabah", "Saudi Arabia", "Announced", "N/A", 0, "N/A", "Share in Originator Business,Commodities", "Domestic", "XS124454884848FK", "0.20 B", "0.75 B", "Corporate", "N/A", "N/A", "FLT", "Saudi Arabia", "Engineering-Construction", "N/A", "No Prices", "N/A", "Al Kifah Holding Company"]
]

【问题讨论】：

标签： jquery datatables

【解决方案1】：

知道了添加 columndefs 以将类添加到我的首选列，然后通过在每一行中搜索添加的类来捕获我的列，然后更改我的 html。

   $.fn.dataTable.ext.errMode = 'throw';
    var table = $('#' + $('.bondsListTable').attr('id')).DataTable({
        dom: 'Bfrtip',
        buttons: [
            { extend: 'copy', className: 'btn-sm' },
            { extend: 'csv', className: 'btn-sm' },
            { extend: 'excel', className: 'btn-sm' },
            { extend: 'pdfHtml5', className: 'btn-sm' },
            { extend: 'print', className: 'btn-sm' },
        ],
        //"serverSide": true,
        //"processing": true,

        "paging":true,
        data: e.detail.data,
        columns: e.detail.columns,
columnDefs: [
            {
              targets: 1,
              className: 'Detailed-Sukuk-Clickable'
            },{
                "targets":  2 ,
                "visible": true,
                "searchable": false,
                className: 'Detailed-Sukuk-WID'
            },
        responsive: {
            details: { 
                type: 'column'
            }
        },"createdRow": function( row, data, dataIndex ) {

                let element = $(row).children('.Detailed-Sukuk-Clickable').text();
                let splitted_Element = element.split('-Splitter:');

                $(row).children('.Detailed-Sukuk-Clickable').html('<a href="javascript:;" onclick="ShowCompanyDetailsOnClick(' + splitted_Element[1] + ', false)">' + splitted_Element[0] +'</a>');
                        // Add a class to the cell in the second column
                        $(row).children('.Detailed-Sukuk-Clickable').addClass('text-justify');

                        // Add a class to the row
                        $(row).addClass('important');
                    },
        "initComplete": function(settings, json) {
            HandleDatatableSearchBar();
            HandleDt_Buttons();
            GenerateShowAndHideCols(e.detail.columns);
            ShowHide();
        }
    });

【讨论】：