通过单击 JQuery DataTable 打开引导模式

Posted 2023-05-09

【中文标题】通过单击 JQuery DataTable 打开引导模式

【英文标题】：Bootstrap Modal Opening by Clicking JQuery DataTable

【发布时间】：2015-07-24 01:44:43

【问题描述】：

我做了一个 JSFIDDLE，https://jsfiddle.net/t53cyutt/

我需要帮助，以便在单击 DataTable 中的一行后打开模式。

有什么建议吗？

我认为这个小代码可以解决问题，但它不会。

$(document).ready(function () 
$('#jobs').DataTable();


$('#jobs').on('click', 'tr', function () 
    var name = $('td', this).eq(1).text();
    $('#DescModal').dialog("open");
);

【参考方案1】：

您的 Fiddle 缺少引导 JS。 Bootstap 使用selector.modal('show') 我更新了你的fiddle

【参考方案2】：

这将允许您在单击数据表中的表 tr(row) 时打开模式。

$(document).ready(function()
 
      var dataTable = $('#developers').DataTable(

     $('#your-table-id-here').on('click', 'tr', function()
      
        var jsData = dataTable.row(this).data();
        $('#your-modal-id-here').modal('show');
        $('#your-modal-body-id-here').text(jsData[0]); //[0] will display 1st column of your table
      
  ); 
);

或

<div class="modal fade" id="DescModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
                 <h3 class="modal-title">Job Requirements & Description</h3>

            </div>
            <div class="modal-body">
                 <h5 class="text-center"></h5>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
                <button type="button" class="btn btn-primary">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Jquery：每行点击动态内容呈现。

$(document).ready(function () 
    $('#jobs').DataTable();
    $('#jobs').on('click', 'tr', function () 
        var val= $('td', this).eq(2).text(); //eq(2) increase the value inside eq() will display the txt column wise.
        $('#DescModal').modal("show");
        $('.text-center').text(val);
    );
);

你可以看演示here。