在jquery数据表中显示模态弹出窗口

时间:2017-07-17 14:23:52

标签: jquery datatables modal-dialog

我的要求是使用jquery数据表显示一个表,并在表的rowclick上弹出一个模态窗口。 数据显示在表格中,并且在点击特定行时也会出现行值。 现在我需要显示一个模式弹出窗口,其中包含行数据,复选框将基于数据计数。

我该怎么做?

为了您的参考,我创建了一个JS小提琴:

https://jsfiddle.net/znqn1kfd/

HTML

<input type='button' class="glbBtnN" value="View Users" id="btnView" />
    <table id="tblUserDetials" cellspacing="0" width="100%" class="display responsive nowrap">
        <thead>
            <tr>
                <th>Menu Code</th>
                <th>Page Name</th>
                <th>Main Menu</th>
            </tr>
        </thead>
    </table>
    <div id="divPopUp"></div>

的Javascript

var result = [{ "MenuCode": "UTHRR001", "PageName": "XYZ", "MainMenu": null }, 
              { "MenuCode": "UTHRR002", "PageName": "ABC", "MainMenu": "UTHRR001"}]               

$("#btnView").on('click', function () {
   $('#tblUserDetials').DataTable({
           "aaData":result,
            "columns": [{ "data": "MenuCode" }, { "data": "PageName" }, { "data": "MainMenu" }]
        });
        $(document).on("click", "tbody tr[role='row']", function () {
            alert($(this).closest('tbody tr').children('td:eq(0)').text() + ',' + $(this).closest('tbody tr').children('td:eq(1)').text())
        });
    });

0 个答案:

没有答案