Question

我想实现一个目标，但我不知道是否有可能。我有一个分页，而不是导航到新页面后点击我希望它打开一个用bootstrap制作的模态。当我删除分页时，模态会正确打开，但它不能与分页一起使用。如何更改分页jquery函数以使分页和模态一起工作？

或者还有其他方法可以做到这一点，任何建议都会受到赞赏。

由于

1-分页

<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- External resources for the pagination

6-我的父页

按钮列表是分页，父页面是表单，分页是用户填写表单的次数。当我点击分页链接时，我应该打开一个模态来编辑与分页ID相关的数据。

7-当我不使用分页时的模态镜头，请注意当我使用分页时，模态无法启动。

由于

Answer 1

这是一个开始

$('#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评论的附录：

我必须使用链接打开模态，每个模态页面是根据href中的id查询的结果，如：idssr“）？＆gt;”＆gt;。我怎么能这样做？

第一个php脚本是服务器端。因此，在呈现页面时，您的所有链接都是已知的。 Bootpag动态呈现客户端，所以理想情况下，如果在初始化时你可以映射一个php定义的javascript结构，bootpag init可以访问以将url映射到寻呼机按钮

这样做的一种方法是编写一些创建javascript简单对象的php脚本，使得最终结果如下所示：

    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") ] );
            });


    });

现在设置了按钮，您可以使用“触发模式”，请参阅Varying modal content based on trigger button以获取更多信息。

这将允许一个模态基于触发按钮显示动态内容。它使用Bootstrap Modal show.bs.modal事件，我在这里使用它来根据给定的URL进行ajax调用。

注意：这个ajax调用很简单，因为我不知道你的网址是什么，我假设是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);
});

注意：此代码均未经过测试，仅用于展示概念。你必须付出努力来调试它。

但现在我有一个问题要问你当您考虑将bootpag用于填充div时，这是很多努力使用模式来显示动态内容。

你有使用模态的原因吗？

快乐编程！

是否可以在分页点击时启动bootstrap模式

1 个答案:

每个OP评论的附录：