Question

我正在html文件中创建表格。该表使用ajax调用填充了json文件中的数据。我在引导程序中使用datatable从json文件加载数据。 https://datatables.net/extensions/responsive/examples/initialisation/ajax.html。
现在，我想在单击表中的一行时打开一个模式。模型零件不起作用。另外，我想用相应行中的数据填充模态。谁能帮我

table.html文件中的表部分如下：

                    <div class="table-responsive">
                        <table class="table table-bordered responsive" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Location</th>
                                    <th>Email</th>
                                    <th>Phone no</th>
                                    <th>Start date</th>
                                </tr>
                            </thead>

                        </table>
                    </div>

demo.js文件中的ajax调用

      // Call the dataTables jQuery plugin
      $(document).ready(function() {
        $("#dataTable").DataTable({
          ajax: "./data/newusers.json",
          columns: [
            { data: "name" },
            { data: "location" },
            { data: "email" },
            { data: "phone" },
            { data: "startdate" }
          ]
        });
      });

json文件如下：

      {
        "data": [
          {
            "name": "Tiger Nixon",
            "location": "Bangalore",
            "email": "tiger.nixon@yahoo.com",
            "phone": "7896546789",
            "startdate": "2018/04/25"
          },
          {
            "name": "Garrett Winters",
            "location": "Goa",
            "email": "garrett.wint34@gmail.com",
            "phone": "6398764532",
            "startdate": "2018/07/25"
          }
        ]
      }

我根据https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

进行了尝试

    // Call the dataTables jQuery plugin
    $(document).ready(function() {
    $("#dataTable").DataTable({
        ajax: "./data/newusers.json",
        columns: [
        { data: "name" },
        { data: "location" },
        { data: "email" },
        { data: "phone" },
        { data: "startdate" }
        ],
        responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal({
            header: function(row) {
                var data = row.data();
                return "Details for " + data[0];
            }
            }),
            renderer: $.fn.dataTable.Responsive.renderer.tableAll({
            tableClass: "table"
            })
        }
        }
    });
    });

上面的代码不起作用。谁能帮我吗？

Answer 1

如果要将ajax数据与DataTables响应详细信息模式显示选项一起使用，则“窍门”是为模式触发条件用class="none"添加一个额外的空列 ...

<thead>
    <tr>
        <th>Name</th>
        <th>Location</th>
        <th>Email</th>
        <th>Phone no</th>
        <th>Start date</th>
        <th class="none"></th>
    </tr>
</thead>

，然后使用column类型和目标选项来使单击tr行触发模式...

      responsive: {
            details: {
                type: 'column',
                target: 'tr',
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function (row) {
                        var data = row.data();
                        return 'Details for ' + data.name;
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
             }
      },...

Demo of responsive details modal

或者，您可以在标记及其show.bs.modal事件中使用Bootstrap模式，以根据需要使用jQuery使用数据填充模式。可以使用数据属性将row渲染方法中的传递给模态。使用这种方法，您可以完全控制模态内容。

HTML：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle"></h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>

JS：

"columns": [
    ...
    { "data": "fieldname", "render": function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-id="'+row.id+'" data-title="'+row.title+'" data-target="#myModal">'+data+'</button>'} },
    ...
],


$("#myModal").on('show.bs.modal', function (e) {
    var triggerLink = $(e.relatedTarget);
    var id = triggerLink.data("id");
    var title = triggerLink.data("title");

    $("#modalTitle").text(title);
    $(this).find(".modal-body").html("<h5>id: "+id+"</h5>");
});

Demo of custom Bootstrap modal

如何使用Bootstrap 4为表中的行创建模式

1 个答案: