如何在数据表中使用引导模式在弹出窗口中打开数据

Question

在这里，我正在尝试在弹出框中填充来自 db 的数据。

我在 Django 模板中使用数据表并渲染数据。

现在我想在我的页面上有一个查看按钮，该按钮应该会打开一个与该行对应的弹出框。

我已经浏览了数据表文档 - https://datatables.net/extensions/responsive/examples/display-types/bootstrap4-modal.html 我们可以在哪里填充数据，但这里的问题是，我们如何从服务器获取数据，或者我们如何处理来自服务器的数据以用于弹出框。

有什么办法吗？

您能否提出解决方案？

 <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <table id="service_center" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Vehical</th>
                                    <th>Service Date</th>
                                    <th>KMS</th>
                                    <th>View</th>

                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block scripts %}
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
    <script src="/static/plugins/datatables/dataTables.editor.js"></script>
    <script src="/static/plugins/datatables/editor.bootstrap4.min.js"></script>

    <script>
        $(document).ready(function () {
            $.extend(true, $.fn.dataTable.defaults, {
                columnDefs: [
                    {
                        targets: '_all',
                        defaultContent: ''
                    }
                ]
            });
            var table = $('#service_center').DataTable({
                "pageLength": 100,
                "serverSide": true,
                "bSearchable":true,
                "dom": 'blfrtip',
                "ajax": "/dt/veh_service/?format=datatables",
                "columns": [
                    {
                        "data": "m.veh_number"
                    },
                    {
                        "data": "service_date"
                    },
                    {
                        "data": "kms"
                    },{
                    "data": "id",
                    "bSortable": false,
                    "mRender": function (data, type, full) {
                        return '<a class="btn btn-sm  btn-primary" href="/veh_service/' + full.id + '/edit">' + 'View' + '</a>';
                    }
                }]
            });

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

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


        });
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        var csrftoken = getCookie('csrftoken');

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
    </script>
    {% endblock %}

谢谢。

Answer 1

给你的按钮一个类，然后为它创建一个监听器。

table.on('click', '.btn-class', function() {
    const rowData = table.row($(this).closest('tr')).data();
});

这将为您提供所选行的数据。