jquery - 如何使用数据表中的引导模型在弹出窗口中打开数据

问题描述

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

谢谢你。

标签： jquerydjangodatatables

jquery - 如何使用数据表中的引导模型在弹出窗口中打开数据

问题描述

解决方案

推荐阅读