laravel 模态显示数据库中的数据

Question

我需要完全像这样显示。它目前正在工作，但如果有替代和更清洁的方法，请。发帖。

我将准确地发布它是如何工作的。我感觉有更多的方式来显示数据。

这一切都在一个刀片中。我们称之为 table.blade.php

这是现在正在运行的代码。

表格代码。

<table id="example1" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="width:35%;">Name</th>
                    <th>Contact Person</th>
                    <th>Email</th>
                    <th>Phone Number</th>
                    <th>Date</th>
                    <th>View</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                @foreach($data as $value)
                <tr>
                    <td>{{ $value['name'] }}</td>
                    <td>{{ $value['contact_person'] }}</td>
                    <td>{{ $value['email'] }}</td>
                    <td>{{ $value['phone_number'] }}</td>
                    <td>{{ date('F d, Y h:i:s a',strtotime($value['created_at'])) }}</td>
  <!--view button--><td><button data-id="{{ $value['id'] }}" class="btn btn-block btn-info" onClick="open_container2(this);" ><i class="fa fa-fw fa-eye"></i> View </button></td>
                    <td><a href="{{ url('dashboard/delete', [Hashids::encode($value -> id)]) }}"><button class="btn btn-block btn-danger"><i class="fa fa-fw fa-trash"></i> Delete</button></a></td>
                </tr>
                    @endforeach
            </tbody>
        </table>

如果我点击 查看 按钮，它将转到此脚本

<script type="text/javascript">
    function open_container2(id)
    {
        $.ajax({
            url:'{{ url('dashboard/view') }}',
            type: 'GET',
            dataType: 'JSON',
            data: { id:id.getAttribute('data-id') },
            success: function(data){
                if(data.success)
                {
                    $('#date').html(data.data.created_at);
                    $('#name').html(data.data.name);
                    $('#corp').html(data.data.name);
                    $('#cp').html(data.data.contact_person);
                    $('#email').html(data.data.email);
                    $('#phone').html(data.data.phone_number);
                    $('#link').attr('href', 'dashboard/xlsx/' + data.data.id);
                    $('#link2').attr('href', 'dashboard/edit/' + data.data.id);
                    $('#myModal2').modal('show');
                }
            }
        });
    }
</script>

在检索到所有数据后，它会显示蓝色模态，就像在顶部一样。

模态

<div class="modal-body">
                            <div class="box-header with-border">
                                <h3 class="box-title" id="corp">
                                </h3>
                            </div><!-- /.box-header -->
                            <div class="box-body">

                                <dl class="dl-horizontal ajax">
                                    <dt>Posted Date</dt>
                                    <dd id="date"></dd>
                                    <dd>&nbsp;</dd>
                                    <dt>Name</dt>
                                    <dd id="name"></dd>
                                    <dd>&nbsp;</dd>
                                    <dt>Contact Person</dt>
                                    <dd id="cp"></dd>
                                    <dt>Email</dt>
                                    <dd id="email"></dd>
                                    <dt>Phone Number</dt>
                                    <dd id="phone"></dd>
                                </dl>
                            </div><!-- /.box-body -->

                    </div><!-- ./col -->

现在，如果我可以显示所有数据而无需通过以下方式：

$('#date').html(data.data.created_at);
                    $('#name').html(data.data.name);
                    $('#corp').html(data.data.name);
                    $('#cp').html(data.data.contact_person);
                    $('#email').html(data.data.email);
                    $('#phone').html(data.data.phone_number);

那太好了。

我想以这样的方式显示它。

我想要的例子。

<dl class="dl-horizontal ajax">
    <dt>Posted Date</dt>
    <dd>{{ $value['created_at'] }}</dd>
    <dd>&nbsp;</dd>
    <dt>Name</dt>
    <dd>{{ $value=['name'] }}</dd>
    <dd>&nbsp;</dd>
    <dt>Contact Person</dt>
    <dd>{{ $value['contact_person'] }}</dd>
    <dt>Email</dt>
    <dd>{{ $value['email'] }}</td>
    <dt>Phone Number</dt>
    <dd>{{ $value['phone_number'] }}</dd>
</dl>

Answer 1

Laravel 约束

试图实现的功能在 Laravel 中是不可能的。 Laravel 代码和 jquery 代码之间没有直接联系。您必须像您一样使用 jquery 来更新 DOM。

一路AngulaJS

实现此类功能的最佳方法是使用 AngularJS。以下是您在 AngularJS 中的操作方式

1. 对 API 进行异步 ajax 调用以获取数据
2. 在模型（或范围）中加载数据
3. 在 HTML 中使用范围对象
4. 模型（作用域）是双向绑定的，因此来自 JS 的任何更改都会 迅速反映在 HTML 中，反之亦然

深潜

详细信息您可以read here。