Пейджер внутри Pagination работает только один раз, - PullRequest
Новая
       8

Пейджер внутри Pagination работает только один раз,

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

Я создал тестовую страницу, используя чистый html. Я использую Bootstrap 3.4.1, кроме этого нет пользовательских css, js или jquery. Я настроил страницу с нумерацией страниц. 5 страниц. Нумерация страниц работает отлично. Я добавил в bootstrap пейджер. Пейджер будет работать только один раз на каждой странице, затем снова не будет работать.

  1. Я искал здесь похожие проблемы. Единственные, которые я мог найти с разбивкой на страницы или переключением данных, работали только один раз, это результат пользовательского jquery или пользовательского css. Ни один из которых я использую.
  2. Я пробовал разные версии bootstrap, те же результаты.
  3. Я пытался включить атрибут data-target в пейджер, но, похоже, он только ухудшился, поскольку кнопки пейджера вообще не работали.
  4. Я создал JSFiddle для тестирования .
  5. Полный код размещен ниже.

https://jsfiddle.net/ap7q3jov/


<html>
<head>
    <title>Pagination Test page</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<body>
<div id="topHeader">
    <div class="container">
        <h1>Pagination Test Page</h1>
    </div>
</div>
<div class="container">
    <ul class="pagination pagination-lg">
        <li class="active"><a data-toggle="tab" href="#app1">1</a></li>
        <li><a data-toggle="tab" href="#app2">2</a></li>
        <li><a data-toggle="tab" href="#app3">3</a></li>
        <li><a data-toggle="tab" href="#app4">4</a></li>
        <li><a data-toggle="tab" href="#app5">5</a></li>
    </ul>
    <div class="tab-content" id="AppData">
        <div id="app1" class="tab-pane fade in active">
            <h3>Page 1</h3>
            <ul class="pager">
                <li class="next"><a data-toggle="tab" href="#app2">Next</a></li>
            </ul>
        </div>
        <div id="app2" class="tab-pane fade">
            <h3>Page 2</h3>
            <ul class="pager">
                <li class="previous"><a data-toggle="tab" href="#app1">Previous</a></li>
                <li class="next"><a data-toggle="tab" href="#app3">Next</a></li>
            </ul>
        </div>
        <div id="app3" class="tab-pane fade">
            <h3>Page 3</h3>
            <ul class="pager">
                <li class="previous"><a data-toggle="tab" href="#app2">Previous</a></li>
                <li class="next"><a data-toggle="tab" href="#app4">Next</a></li>
            </ul>
        </div>
        <div id="app4" class="tab-pane fade">
            <h3>Page 4</h3>
            <ul class="pager">
                <li class="previous"><a data-toggle="tab" href="#app3">Previous</a></li>
                <li class="next"><a data-toggle="tab" href="#app5">Next</a></li>
            </ul>
        </div>
        <div id="app5" class="tab-pane fade">
            <h3>Page 5</h3>
            <ul class="pager">
                <li class="previous"><a data-toggle="tab" href="#app4">Previous</a></li>
                <li class="next"><a data-toggle="tab" href="#app1">Next</a></li>
            </ul>
        </div>
    </div>
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</body>
</html>
...