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

Posted 2023-05-09

【中文标题】如何在数据表中使用引导模式在弹出窗口中打开数据

【英文标题】：How to open data in pop up using bootstrap model in datatables

【发布时间】：2020-05-14 01:31:28

【问题描述】：

在这里，我正在尝试在弹出框中填充来自 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 %

谢谢。

【问题讨论】：

首先，您需要将锚链接替换为 # 或将其替换为带有 data-target 的按钮 ...！我假设您已经有一个具有特定 ID 的隐藏模式。然后，如果您希望您的模态体成为您的编辑器。为每个输入使用适合您从表中获取的数据的类名放置一个表单...然后在显示您的模态的同一 jQuery 范围内，您使用相同的类名更新这些输入值...我开始了一个小提琴，但你分享一小段代码并没有让我们变得更容易:)

实际上，我有一个由字段组成的 form.py，我想显示。以及views.py中的相应功能视图来添加和编辑表单。在这个问题中，我使用 Django rest 框架获取数据并使用数据表进行显示。在数据表中，我必须实现显示按钮以在弹出框中显示所有行数据。

【参考方案1】：

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

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

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

【讨论】：

您能否详细说明您的回答？这将是一个很大的帮助

我想像这样打开弹出窗口-“datatables.net/extensions/responsive/examples/display-types/…”但我没有得到数据。