Bootstrap 通过单击 JQuery 数据表打开模态

Question

我做了一个 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");
});

Answer 1

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

Answer 2

这将允许您在单击数据table 中的table tr（行）时打开模式。

$(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。

Bootstrap 通过单击 JQuery 数据表打开模态

Bootstrap Modal Opening by Clicking JQuery DataTable

jquery

modal-dialog

twitter-bootstrap