jQuery Статья Pagination (разделенная длинная статья) - PullRequest
0 голосов
/ 17 апреля 2020

Я пытаюсь использовать плагин jQuery для разбиения на страницы моих «ОЧЕНЬ длинных» статей, если я сохраню страницу в автономном режиме и добавлю плагин, он работает ОТЛИЧНО! но когда я пытаюсь добавить код в мой скрипт, он запутывается в плагине на github: https://github.com/yak0d3/senzill-pagination мой код: я добавил id = wrapper style = видимость: скрытый для содержимого div

 <div class="card-body" id="wrapper" style="visibility:hidden;">
                    <div class="list-item mb-3">
                        <div class="list-left">
                            <a href="{{ url('/profile/' .$post->user->username) }}">
                            @if (!empty($post->user->social_id))
                            <img class="avatar img-fluid rounded-circle" src="{{ $post->user->avatar }}">
                            @else
                            <img class="avatar img-fluid rounded-circle" src="{{ url('/images/' . $post->user->avatar) }}">
                            @endif
                            </a>
                        </div>         
                        <div class="list-body">
                            <div class="text-ellipsis">
                                <a class="nocolor" href="{{ url('/profile/' .$post->user->username) }}">{{ $post->user->name }}</a>
                                <small class="text-muted time">{{ $post->created_at->diffForHumans() }}</small>
                            </div>
                            <div class="text-ellipsis">
                                <small class="text-muted">{{ $post->user->username }}</small>
                                @if (count($post->tags))
                                @foreach ($post->tags as $tag)
                                <small class="text-muted time"><a href="{{ url('/category/' . $tag->name) }}">
                                    #{{ $tag->name }}
                                </a></small>
                                @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                    <h1>{{ $post->post_title }}</h1>
                    @if (!empty($post->post_desc))
                    <p>
                        {{ $post->post_desc }}
                    </p>
                    @endif
                    @if (!empty($setting->post_ads))
                    <p>
                        {!! $setting->post_ads !!}
                    </p>
                    @endif
                @if($post->contents)
                    @foreach ($post->contents as $content)
                    @if ($content->type == "header")
                    <h4>{{ $content->body }}</h4>
                    @endif

                    @if ($content->type == "text")
                    <p>{{ $content->body }}</p>
                    @endif

                    @if ($content->type == "txteditor")
                    {!! clean( $content->body ) !!}
                    @endif

                </div>

Затем я добавил скрипт

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

                <!-- senzill-pagination.js -->
    <script src="{{ asset('/js/senzill-pagination.js') }}"></script>
    <script>
        $(document).ready(function(){
          var _elPerPage = 10;
          var number_of_pages = Math.ceil($('p').length / _elPerPage);
          function stats(){
            if($('#elPerPage').val() > 0)
             {
               _elPerPage = $('#elPerPage').val();
             }
             number_of_pages = Math.ceil($('p').length / _elPerPage);
             $('#number_of_pages').text(number_of_pages);
             $('#elements_per_page').text(_elPerPage);
          }
          var senzill =  $('#wrapper').senzill(
                {
                    elPerPage: _elPerPage
                }
            );
          stats();
          $('#set_elems_per_page').on('click',function(){
            if($('#elPerPage').val() > 0){
               _elPerPage = $('#elPerPage').val();
             }
             _elPerPage = $('#elPerPage').val();
             console.log(_elPerPage);
             senzill.destroy();
             senzill = undefined;
             senzill =  $('#wrapper').senzill(
               {
                  elPerPage: _elPerPage
               });
             stats();
          });
        });
    </script>

кажется, что контент остался скрытым, и показ сценариев не показывал, я также попытался добавить сценарии поверх div, не работал, и я добавил jquare в голова, но все та же .. пожалуйста .. это мой первый раз, используя stackoverflow, так как я не программист, я надеюсь, вы все мне поможете .. спасибо

1 Ответ

0 голосов
/ 18 апреля 2020

Решено. Похоже, что я поставил скрипт на том же скрытом элементе div, изменив его на тот, который заставляет его работать, но для загрузки / перехода к страницам требуется почти 20 секунд при любом приближении этой нумерации страниц: /?

...