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

你的小提琴错过了引导程序JS。 Bootstap使用selector.modal('show') 我更新了您的fiddle

Answer 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
      }
  }); 
});

OR

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

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

2 个答案: