Можно ли запустить bootstrap modal с помощью щелчка по страницам

Diasline спросил: 12 мая 2018 в 04:09 в: jquery

Я хотел бы добиться цели, но я не знаю, возможно ли это. У меня есть разбиение на страницы, вместо перехода на новую страницу после щелчка, я бы хотел, чтобы он открыл модальную версию, сделанную с помощью бутстрапа. Модаль открывается правильно, когда я удаляю разбивку на страницы, но он не может работать с разбиением на страницы. Как я могу изменить функцию jqery разбиения на страницы, чтобы сделать одновременно и разбивку на страницы, и модальную работу?

Или есть ли другой способ сделать это, любое предложение будет оценено.

Спасибо

1- Pagination

<a id="pagination-obstetrico"  data-toggle="modal" data-target="#view" href="<?php echo base_url("admin/data_ssr_by_id/$row->idssr")?>"></a>

2- Модальный вызов

<div class="modal fade" id="ver_ssr"  role="dialog" >
<div class="modal-dialog modal-lg" >
<div class="modal-content" ></div>
</div>
</div>

3- функция разбиения на страницы

$('#pagination-obstetrico').twbsPagination({
totalPages: 5,
// the current page that show on start
startPage: 1,// maximum visible pages
visiblePages: 5,initiateStartPageClick: true,// template for pagination links
href: false,// variable name in href template for page number
hrefVariable: '{{number}}',// Text labels
first: 'First',
prev: 'Previous',
next: 'Next',
last: 'Last',// carousel-style pagination
loop: false,// callback function
onPageClick: function (event, page) {
   $('.page-active').removeClass('page-active');
  $('#page'+page).addClass('page-active');
},// pagination Classes
paginationClass: 'pagination',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first',
pageClass: 'page',
activeClass: 'active',
disabledClass: 'disabled'});

5- Внешние ресурсы для разбивки на страницы

6- Моя родительская страница

  • Список кнопок - это разбиение на страницы , родительская страница представляет собой форму, разбиение на страницы - это количество случаев, когда пользователи заполнили форму. Когда я нажимаю ссылку для разбивки на страницы, я должен открыть модальный файл для редактирования данных, релевантных идентификатору страницы.

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

img src ="path_to_imgs / 7f0b7735ce70f2d530d3ba0222b58463 / 7f0b7735ce70f2d530d3ba0222b58463-1.png">

Спасибо

1 ответ

fnostro ответил: 13 мая 2018 в 04:21

Это начало

$('#page-selection').bootpag({
  total: 10,
  href: "#pro-page-{{number}}"
}).on("page", function(event, /* page number here */ num) {
  $("#content").html("Page " + num); // some ajax content loading...
});

$(function() {
  $("#page-selection .pagination.bootpag li a")
    .attr('data-toggle', 'modal')
    .attr('data-target', '#myModal');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootpag/1.0.7/jquery.bootpag.js"></script>

<div id="content"></div>
<div id="page-selection"></div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="phpContent"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Добавление к OP Комментарий:

Я должен использовать ссылку для открытия модальной, каждая модальная страница является результатом запроса по id в href, например: idssr")? >" gt ;. Как я могу сделать это так?

Первый скрипт php является серверной. Таким образом, все ваши ссылки известны к моменту отображения страницы. Bootpag динамически отображает клиентскую сторону, поэтому в идеале было бы неплохо, если бы при инициализации вы могли сопоставить определенную PHP-конструкцию javascript, с которой инициализация bootpag могла бы получить доступ к карте URL-адресов для кнопок пейджера.

Один из способов сделать это - напишите некоторый php-скрипт, который создает простой объект javascript, так что конечный результат выглядит следующим образом:

    var pagerUrls = {
        "1": "url1",
        "2": "url2",
        "3": "url3",
        ...
        "n": "urln"
    };

Затем во время инициализации вы можете сделать это:

    $(function() {
        $("#page-selection .pagination.bootpag li a")
            .attr('data-toggle', 'modal')
            .attr('data-target', '#myModal');        $("#page-selection .pagination.bootpag li a")
            .each( function(){
                $(this).data('url', pagerUrls[ $(this).data("lp") ] );
            });    });

С установленными кнопками вы можете использовать "инициированный модальный", чтобы просмотреть дополнительную информацию об изменении модальности на основе кнопки триггера.

Это позволит одному модальному отображать динамический контент на основе триггера кнопка. Он использует событие Bootstrap Modal show.bs.modal, которое я использую здесь для создания ajax-вызова на основе заданного URL-адреса.

NB: этот вызов ajax упрощен, поскольку у меня нет подумайте, верните ли вы свои URL-адреса, я предполагаю html, но вам нужно будет настроить соответствующие параметры ajax для ваших нужд.

$('#myModal').on('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = $(event.relatedTarget);   var ajaxOptions = {
    url: button.data('url'),
    method: "POST",
    dataType: "html"
  };  var request = $.ajax(ajaxOptions);
  var modal = $(this);
  modal.find('.modal-title').text('Results from ' + ajaxOptions.url );
  modal.find('.modal-body #phpContent').val(request);
});

NB: ни один из этих кодов не проверен и предназначен только для иллюстрации концепции. вам придется приложить усилия для его отладки.

Но теперь у меня есть вопрос для вас.
Это много усилий, чтобы использовать модальное отображение динамического когда вы считаете, что bootpag предназначен для заполнения div именно этим.

Есть ли причина, по которой вы используете модальный?

Счастливое программирование!

Diasline ответил: 13 мая 2018 в 11:11
Большое вам спасибо за ваш ответ. Я очень ценю это, он учит меня. Я пытался изменить ваши коды, потому что, я должен использовать ссылку для открытия модальной, каждая модальная страница является результатом запроса по id в href, например: < a href ="<? Php echo base_url ("администратор / data_ssr_by_id / $ row- & GT; idssr") & GT;?"& GT; & Lt; / а & GT ;. Как я могу это сделать так? благодаря
fnostro ответил: 13 мая 2018 в 02:46
есть много, чтобы рассмотреть здесь, я добавлю к моему ответу, чтобы уточнить, основываясь на вашем комментарии.
Diasline ответил: 13 мая 2018 в 02:49
заранее спасибо
Diasline ответил: 13 мая 2018 в 05:46
Еще раз спасибо за ваше время. Я должен использовать модальный, потому что мне нужна эта структура родительской страницы. Я собираюсь обновить свой вопрос, чтобы вы видели снимок экрана моей родительской страницы