Открыть всплывающее окно в Jquery datatable с соответствующими данными не работает

Что я хочу, так это связать Jquery datatable, в котором есть много записей coming.In в каждой строке есть div onclick, из которого я хочу открыть форму с соответствующими данными.

Прежде всего ниже приведен мой код для привязки данных.

function getDashboardData(STATE) {
    try {

        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/BindMWSiteSurvey",
            data: JSON.stringify({ STATE: STATE }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                var datVal = JSON.parse(data.d);

                var details = [];

                for (var i = 0, len = datVal.length; i < len; i++) {

                    var result = datVal[i];
                    
                    var buttonColumn = "<b><div style='cursor: pointer;' value='VALIDATE' onClick=" + 'OpenPopUpForUpdate("' + this + '");' + " />Validate</div></b>";                  

                    details.push([result.SAP_ID, result.CANDIDATE_ID, result.STATE, result.SITE_NAME, result.CANDIDATESTATUS, result.CURRENT_STATUS, buttonColumn]);
                }

                $('#grdMWSiteSurvey').DataTable({
                    destroy: true,
                    autoWidth: false,
                    "aaData": details,
                    "aoColumns": [
                        { "sTitle": "Sap ID" },
                        { "sTitle": "Candidate ID" },
                        { "sTitle": "State" },
                        { "sTitle": "Site Name" },
                        { "sTitle": "Candidate Status" },
                        { "sTitle": "Current Status" },
                        { "sTitle": "ACTION" }
                    ],
                    "bDestroy": true
                });
            },
            error: function (data) {
                alert('Something went wrong..!!');
            }
        });
    } catch (e) {
        //exception
    }
}
<div class="col-md-12">
                <table id="grdMWSiteSurvey" class="display responsive nowrap"></table>
            </div>

В каждой строке есть div с именем VALIDATE, по щелчку которого я хочу открыть всплывающее окно.

Поэтому то,что я немного попробовал, так и следует.

function OpenPopUpForUpdate(a) {
    var row = a.parentNode.parentNode;
    var rowIndex = row.rowIndex - 1;
    var SAPID = row.cells[0].innerHTML;       
}
<div id="popupdiv">
        <h1>This is opened in pop up</h1>
    </div>

Но это не открытие всплывающего окна. Также оповещение по какому-то столбцу тоже не работает. Пожалуйста, предложите, как этого добиться.

1 3
javascript html css jquery datatables

1 ответ:

Вы можете использовать jQueryui для отображения ваших данных в диалоговом окне. Учитывая ваш фрагмент, вы можете сделать это таким образом.

$('#popupdiv').on('click', function(){
  $(this).dialog();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="popupdiv">
   <h1>This is opened in pop up</h1>
</div>

Полное решение отображения каждой строки таблицы может быть сделано, как показано ниже, где можно реализовать свой собственный диалог со стилем CSS и функцией Js 

$('table').on('click', 'tr', function(){
 let values = [];
 $(this).children().each(function(){
  values.push($(this).html());
 })
 $('#mod').css('display', 'block');
 $('#mod-value1').html(values[0]);
 $('#mod-value2').html(values[1]);
})

$('#mod').on('click', function(){
  $(this).css('display', 'none');
})
table {
  background-color: orange;
}
td {
  border: 1px solid red;
  margin: 0;
  cursor: pointer
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
 top: 50%;
 left: 50%;
 width: 3cm;
 height: 3cm;
 border-radius: 2px;
 background-color: #fefefe;
 margin: auto
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<table>
  <tr>
      <td>col11</td>
      <td>col12</td>
  </tr>
    <tr>
      <td>col21</td>
      <td>col22</td>
  </tr>
</table>
<div id="mod" class="modal">
   <div id="mod-content" class="modal-content">
      <div id="mod-value1"></div>
      <div id="mod-value2"></div>
   </div>
</div>
1