Laravelアプリのページ付けが2回表示される

debugcn 投稿 Dev

CasaCoding

最近、ソート可能モーダルと削除モーダルをプロジェクトに追加しました。削除モーダルを追加した後、ページネーションを2回レンダリングするようになりました（説明のために写真が含まれています）。

私のコントローラー

    public function index()
    {
        $contacts = Contact::sortable('firstName')->paginate(10);
        return view('contacts.index', ['contacts' => $contacts]);
    }

私のインデックスブレード

@extends('layouts.master')

@section('content')


<div class="container">
    <div style="margin:10px">
    </div>
    <div class="row">
        <div class="col-sm-10">
            <div class="form-group {{ $errors->has('search') ? 'has-error' : "" }}">
                    {{ Form::text('search',NULL, ['class'=>'form-control', 'id'=>'search', 'placeholder'=>'search contacts...']) }}
                    {{ $errors->first('search', '<p class="help-block">:message</p>') }}
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                    {{ Form::button(isset($model)? 'Find' : 'search' , ['class'=>'btn btn-success', 'type'=>'submit']) }}
            </div>
        </div>
    </div>
    <div class="row">
        <div style="margin-top:10px;">
            <h3>Contacts</h3>
        </div>
    </div>
    <div class="row">
        <div style="margin-top:10px; margin-bottom:10px;">
            <a class="btn btn-sm btn-success" href="{{ route('contacts.create') }}">Create New Contact</a>
        </div>
    </div>
        {{-- @if ($contacts = "") 
            <div class="row">
                <h3>You don't have any contacts saved!</h3>
            <div style="margin-top:10px; margin-bottom:10px;">
                    <a class="btn btn-sm btn-success" href="{{ route('contacts.create') }}">Create New Contact</a>
                </div>

        @else --}}
    <div style="margin:10px">
    </div>
    <div class="row">   
        <div class="table-responsive">
            <table id='dataTable' class="table table-hover col-sm-12 w-auto">
                <thead class="thead-dark">
                    <tr>
                            <th>
                                <h5>@sortablelink('firstName', 'First Name')</h5>
                            </th>
                            <th>
                                <h5>@sortablelink('lastName', 'Last Name')</h5>
                            <th>
                                <h5>@sortablelink('email', 'Email')</h5>
                            <th>
                                <h5>@sortablelink('phone', 'Phone')</h5>
                            <th>
                                <h5>@sortablelink('birthday', 'Birthday')</h5>
                            <th>
                                <h5 style='text-align:center;'>@sortablelink('id', 'Action')</h5>
                            </th>
                    </tr>
                </thead>
                <tbody>
                    @if($contacts->count())
                    @foreach ($contacts as $key => $value)
                        <tr>
                            {{--  Need to add in sort functions for each catagory --}}
                            <td>{{$value->firstName}}</td>
                            <td>{{$value->lastName}}</td>
                            <td>{{$value->email}}</td>
                            <td>{{$value->phone}}</td>
                            <td>{{$value->birthday}}</td>
                            <td>
                                <a class="btn btn-sm btn-success" style='display:inline-block;' href="{{ route('contacts.show', $value->id)}}">Show</a>
                                <a class="btn btn-sm btn-warning" style='display:inline-block;' href="{{ route('contacts.edit', $value->id)}}">Edit</a>                           
                                {{-- for future editmodal 
                                    <a class="btn btn-warning edit" 
                                    data-toggle="modal" 
                                    data-target="#editModal"
                                    data-id="{{ $value->id }}"
                                    data-firstName="{{ $value->firstName }}"
                                    data-lastName="{{ $value->lastName }}"
                                    data-email="{{ $value->email }}"
                                    data-phone="{{ $value->phone }}"
                                    data-birthday="{{ $value->birthday }}"
                                    >
                                    Edit
                                </a> --}}
                                <a class="btn btn-sm btn-second" style='display:inline-block;' 
                                    href="{{ route('contacts.createAddress', ['contact_id' => $value->id])}}">Add Address</a>
                                <a href="#" style='display:inline-block;' 
                                    data-id={{$value->id}}
                                    data-firstName={{$value->firstName}}
                                    data-lastName={{$value->lastName}}
                                    class="btn btn-danger delete" 
                                    data-toggle="modal" 
                                    data-target="#deleteModal">Delete</a>
                            </td>
                        </tr>
                    @endforeach 
                @endif
                </tbody>
            </table>
            {!! $contacts->appends(\Request::except('page'))->render() !!}
{{-- ############################################ Modals ############################################# --}}
        <!-- Edit Modal -- (To be added later once calendar is working) -->
            {{-- <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Edit Contact Information</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="/contacts" method="PUT" id="editForm">
                        <div class="modal-body">
                            @crsf
                            {{ Form::model($contact,['route'=>['contacts.update', $value->id],'method'=>'PATCH']) }}
                            @include('contacts.form_master')
                            {{ Form::close() }}
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <a class="btn btn-sm btn-success" href="contacts/edit">Update</a>
                        </div>
                        </form>
                    </div>
                </div>
            </div>   --}}
        <!-- End Edit Modal -->

        <!-- Delete Warning Modal -->
        <div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <form action="{{ route('contacts.destroy', 'id') }}" method="post">
                            @csrf
                            @method('DELETE')
                            <input id="id" name="id" type="hidden">
                            <h5 class="text-center">Are you sure you want to delete this contact?</h5>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-sm btn-danger" id="deleteOK_button" rid="{{ $value->id }}">Yes, Delete Contact</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        <!-- End Delete Modal --> 

{{-- ########################################## End Modals ########################################### --}}

        </div>
    {{-- @endif --}}
    </div>
    {{ $contacts->links() }}
</div>

@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function(){

            $('#deleteOK_button').on('click',function(){
                var rid = $(this).attr('data-id');

                $.post('{{ url('contacts/delete') }}', {
                    '_token':'{{ csrf_token() }}',
                    'rid' : rid,
                }, function(data){
                    console.log(data);
                }, 'json');
            });
        });
    </script>
@endsection

マスターブレード


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

    <title>Address Book</title>

    <!-- Bootstrap core CSS -->
    <!-- Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <div class="navbar-brand">Address Book</div>
      {{-- <a class="navbar-brand" href="#">Address Book</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button> --}}

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="{{ route('contacts.index')}}">Home <span class="sr-only">(current)</span></a>
          </li>
          {{-- <li class="nav-item">
            <a class="nav-link" href="{{ route('contacts.search')}}">Search</a>
          </li> --}}
        </ul>
      </div>
    </nav>

    <main role="main">
        @yield('content')
    </main>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    @yield('script')
  </body>
</html>

私のwebpackmix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.webpackConfig(webpack => {
    return { plugins: [new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: ["jquery", "$"],
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })] };
});

私はいくつかのことを試しましたが、この問題については私のリーグから少し外れています。いつものように、事前に感謝します!!!

アクタル・ムニル

簡単なレビューのために、いくつかの変更を行います。また、コードの一部が適切にコメントされていないか、divが欠落している可能性があることを確認してください。

<div class="row">   
    <div class="table-responsive">
      <table>
            //here goes your table data
      </table>
       // pagination goes here or after the next div
       {{ $contacts->links() }}
          OR
       //you can write this way either
       {{ $contacts->appends(request()->except('page'))->links() }}
    </div>
</div>

//Modals goes here...
//comment {!! $contacts->appends(\Request::except('page'))->render() !!} if it is not commented

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]