如何在 Jquery DataTables 的每一行中单击的链接上显示 boostrap4 模式弹出窗口？

如何解决如何在 Jquery DataTables 的每一行中单击的链接上显示 boostrap4 模式弹出窗口？

您好，我正在使用 JQuery DataTables，表包含四列，在第一列中，我将显示文件计数为链接，一旦我单击文件链接模式弹出窗口将显示并且应该在弹出窗口中显示文件详细信息。我怎样才能做到这一点？

<!-- jQuery CDN - Slim version (=without AJAX) -->
<
script type = "text/javascript"
src = "https://code.jquery.com/jquery-3.3.1.min.js" > < /script> <
script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" > < /script> <
script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" > < /script> <
script type = "text/javascript"
src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" > < /script> <
script type = "text/javascript"
src = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"
charset = "utf8" > < /script> <
script type = "text/javascript"
src = "https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"
charset = "utf8" > < /script> <
script type = "text/javascript"
src = "https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" > < /script> <
script type = "text/javascript"
src = "https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js" > < /script> <
script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" > < /script> <
script type = "text/javascript"
src = "https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" > < /script> <
script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" > < /script> <
script type = "text/javascript"
src = "https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" > < /script> <
script type = "text/javascript"
src = "https://www.w3schools.com/lib/w3codecolor.js" > < /script>

  <
  script >
  $.ajax({
      async: false,cache: false,type: "GET",url: Services.BaseUrl + 'OHDWebService.asmx/DalGetordeRSSearchDetailsWithParams',data: parameters,success: function(data) {
        debugger;
        $scope.SearchResult = data;
        angular.element(document).ready(function() {
            dTable = $('#tblSearchOrder');
            $scope.tSearchOrder = dTable.DataTable({
              "stateSave": true,"data": $scope.SearchResult,"deferRender": true,"destroy": true,"responsive": true,"scrollX": true,"dom": "<'row'<'col-sm-12 col-md-4 col-lg-4 col-xs-12'l><'col-sm-12 col-md-4 col-lg-4 col-xs-12 text-center'B><'col-sm-12 col-md-4 col-lg-4 col-xs-12'f>>" +
                "<'row'<'col-sm-12 col-md-12 col-lg-12 col-xs-12'tr>>" +
                "<'row'<'col-sm-12 col-md-12 col-lg-5 xol-xs-12'i><'col-sm-12 col-md-12 col-lg-7 col-xs-12 text-center'p>>","columns": [{
                  "data": "AttachmentsCount"
                },{
                  "data": "From"
                },{
                  "data": "To"
                },{
                  "data": "Subject"
                }
              ],"columnDefs": [{
                  "targets": 0,"render": function(data,type,row,Meta) {
                    if (type === 'display') {
                      if (row.AttachmentsCount > 0) {
                        data = '<a target="_blank" href="#" style="text-decoration:none" onclick="AttachmentShow(' + row + ')"> <i class="fas fa-paperclip"></i> (' + data + ')</a>';
                      } else {
                        data = '';
                      }
                    }
                    return data;
                  }
                },{
                  "targets": 3,Meta) {
                    if (type === 'display') {
                      if (row.Subject != '') {
                        debugger;
                        var viewOrderdet = "ViewOrderDetails.aspx?OrderRecordID="
                        data = '<a target="_blank" href=' + viewOrderdet + row.OrderRecordID + ' > ' + data + '</a > ';
                      } else {
                        data = data;
                      }
                    }
                    return data;
                  }
                }


              ]
            });
          },error: function(response) {
            alert(response);

          }
        }); <
      /script>

<!-- NEXTGEN UI --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"><link rel="stylesheet" href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" type="text/css" />

<table id="tblSearchOrder" class="table table-bordered table-sm display dataTable Nowrap" style="width: 100%">
  <thead class="msi-bg-primary" style="color: #fff">
    <tr>
      <%--<th>Sr.No</th>--%>
        <th>Files</th>
        <th>From</th>
        <th>To</th>
        <th>Subject</th>
    </tr>
  </thead>
</table>