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

对API进行异步ajax调用以获取数据
在模型（或范围）中加载数据
在HTML
模型（范围）是双向绑定的，所以JS的任何更改都会及时反映在HTML中，反之亦然

深度潜水

有关详细信息，您可以read here。

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

1 个答案: