单击 JQuery DataTable 单元格中的 href 链接时显示行字段数据

Question

I need to show data.response row field in dialog of JQuery DataTable cell. Cell contains a href link and when in clicked, modal dialog must open to show data.response fiela of that table row. I am confused, I can't understand how to detect row id on click on link in particular cell in order to get index of row to get data.response of the row I need to show id modal dialog. The code (name of the column with a href link is statusCodeVal with render: responseRenderer method):

DataTable

let table = $('#logs-table').DataTable({
            rowsGroup: [
                0,1,2,3,4,5,6
            ],
            "dom": "lptipr",
            "lengthMenu": [2, 10, 30, 100, 500, 1000],
            "pageLength": 10,
            "pagingType": "full",
            "serverSide": true,
            "deferLoading": 0,
            "ajax": {
                "contentType": "application/json",
                "url": "./bitrix-logs/json",
                "type": "post",
                "data": function (d) {
                    addParametersToRequest(d);
                    return JSON.stringify(d);
                }
            },
            "columns": [
                {"data": "dateCall", "name": "dateCall"},
                {"data": "callId", "name": "callId"},
                {"data": "numberA", "name": "numberA"},
                {"data": "numberB", "name": "numberB",},
                {"data": "lineNumber", "name": "lineNumber"},
                {"data": "crmCallType", "name": "crmCallType"},
                {"data": "crmType", "name": "crmType"},
                {"data": "crmRequestType", "name": "crmRequestType"},
                {"data": "data", "name": "statusCodeVal" , render: responseRenderer},
                {"data": "url", "name": "url"}
            ],
            "ordering": false,
            "language": {
                "search": '[(#{common.datatables.search})]',
                "info": '[(#{common.datatables.info})]',
                "infoFiltered": '[(#{common.datatables.infoFiltered})]',
                "infoEmpty": '[(#{common.datatables.infoEmpty})]',
                "emptyTable": '[(#{page.stats.mkn.not.found})]',
                "zeroRecords": '[(#{common.datatables.zeroRecords})]',
                "paginate": {
                    "first": '[(#{common.datatables.first})]',
                    "last": '[(#{common.datatables.last})]',
                    "next": '[(#{common.datatables.next})]',
                    "previous": '[(#{common.datatables.previous})]'
                },
                "lengthMenu": "[(#{common.datatables.lengthMenu})]"
            },
            "drawCallback": function (settings) {
                let api = this.api();
                let customPageInputHtml = '<span class="pg_inner"><input type="text" size="3" class="custom_page_number" ' +
                    'value="' + (api.page.info().page + 1) + '"/> [(#{common.datatables.from})] ' +
                    api.page.info().pages + '</span>';
                $('span.pg_inner').remove();
                $('.dataTables_paginate .previous').after(customPageInputHtml);
                $('.custom_page_number').change(function () {
                    let num = parseInt($(this).val()) - 1;
                    api.page(num).draw(false);
                });
            }

responseRenderer method:

function responseRenderer(data, type, row, meta){

        $('#msg').text(row.response);
        let show = row.statusCode + " " + row.statusCodeVal;
        return `<a href="#" style="display: inline-block; margin-right: 5px;"
                   data-toggle="modal" data-target="#full-message-modal">
                   <span>` + show + `</span>
            </a>`;
    }

Modal dialog

<div id="full-message-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="full-message-container">
                    <p><textarea id="msg" rows="10" cols="80"></textarea></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" th:text="#{bitrix.logs.modal.close}" class="btn btn-default" data-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

Answer 1

Found a solution

function responseRenderer(data, type, row, meta) {
        let show = row.statusCode + " " + row.statusCodeVal;
        let resp = row.response;
        return `<a href="#" style="display: inline-block; margin-right: 5px;"
                   data-toggle="modal" data-target="#full-message-modal" onclick="setMsg('`+ escape(resp) + `')">
                   <span>` + show + `</span>
            </a>`;
    }

    function setMsg(val) {
        $('#msg').text(unescape(val)); // text for modal
    }