将参数从带有分页的元素列表传递给引导模式

Posted 2023-03-08

【中文标题】将参数从带有分页的元素列表传递给引导模式

【英文标题】：pass parameters to bootstrap modal from an elements list with pagination

【发布时间】：2014-03-31 12:08:21

【问题描述】：

我在一个 node.js 应用程序上工作，我在 ejs 视图中有一个包含 n 个元素的列表。 它包含过滤器、分页、...

每个元素都有一个“编辑”动作。当用户点击“编辑”按钮时，会显示一个带有元素数据的模式窗口。

我的问题是列表没有分页，效果很好。

但是使用分页（例如 10 个元素/页），只有前 10 个元素的模态工作良好...

带有 elem n°10（有效）和 n°11（无效）的生成列表代码示例：

<tr class="even">       
  <td class=" ">Abella Sàrl</td>
  <td class=" ">10 Rue du Village L-6585 Steinheim (Steenem)</td>
  <td class=" ">
    <a href="#editMarkerModal" data-toggle="modal">
      <i class="fa fa-edit editMarker" data-marker=""address":"10 Rue du Village  L-6585 Steinheim (Steenem)","longitude":null,"latitude":null,"name":"Abella Sàrl","_user":"5305051a6f2529844824c1c5","_id":"53077ef91f85d2c752f1cb50","uptade_date":"2014-02-21T16:29:45.175Z","create_date":"2014-02-21T16:29:45.175Z","active":true,"spritesheet_y":null,"spritesheet_x":null,"logo":"default","__v":0"></i>
    </a>
  </td>
</tr>
<tr class="odd">
  <td class=" ">Action Line SA</td>
  <td class=" ">28 Route de Longwy L-8080 Bertrange (Bartreng)</td>
  <td class=" ">
    <a href="#editMarkerModal" data-toggle="modal">
      <i class="fa fa-edit editMarker" data-marker=""address":"28 Route de Longwy L-8080 Bertrange (Bartreng)","longitude":null,"latitude":null,"name":"Action Line SA","_user":"5305051a6f2529844824c1c5","_id":"53077ef81f85d2c752f1ca18","uptade_date":"2014-02-21T16:29:44.720Z","create_date":"2014-02-21T16:29:44.720Z","active":true,"spritesheet_y":null,"spritesheet_x":null,"logo":"default","__v":0"></i>
    </a>
  </td>
</tr>

我的 Jquery 测试代码：

$('.editMarker').on('click', function() 
    var marker = $(this).data('marker');        
    alert(marker.name);              
);

感谢您的帮助。 C.

【问题讨论】：

看我的回答。根据您将提供的详细信息，我可以重构我的答案

【参考方案1】：

当您单击分页按钮时，您可能会使用 ajax 获得接下来的 10 个元素。在你的ajax调用成功函数中，你可以使用下面的bootstrap modal初始化代码；

$('a[data-toggle="modal"]').modal();

如果你不使用ajax，没问题。只需将上面的代码放在分页按钮单击事件中即可。

更新：添加示例；

您可以添加功能来分页事件以重新初始化模式；

$(document).ready(function() 
    $('#example').dataTable("sPaginationType": "full_numbers", "iDisplayLength":2);
    initModal();

    $(".dataTables_paginate").find("a").on("click", function() 
            initModal();
    )

    function initModal() 
        $('.mymodal').on("click", function() 
        $('.modal').modal('hide');
        $("#modal-content").html(JSON.stringify($(this).find(".editMarker").data("marker")));
            $('.modal').modal();
    );
    
);

这是一个工作示例：http://jsfiddle.net/HEDvf/1137/

【讨论】：

对于分页，我使用 jquery.dataTables-cust.js。没有ajax，刷新页面时加载所有数据。这是分页的代码：http://jsfiddle.net/zJMjMTY

@ceadreak 我添加了工作示例，请参阅我的更新答案

不，我没有任何错误...我检查了您的示例。 tks

我认为这是另一个问题。当我添加此事件$('.pagination a').on('click', function() alert('pass'); ); 时，当我单击页面链接时，它第一次运行良好。第二次它死了......

我的例子没问题，你说的是你的例子吧？