Question

我试图在我的表中显示用户列表，此外我还试图用bootstrap模式更新个人用户信息。因为我通过以下方式传递user_id进入输入字段。

 <button  data-toggle="modal" data-target="#myCoupon" class="btn btn-primary updateCoupon"  data-id="{{$user->id}}">Update Coupon</button><br>

$(function () {
        $(".updateCoupon").click(function () {
            var my_id_value = $(this).data('id');
            $(".modal-body #hiddenCoupon").val(my_id_value);
        })
    });

<input  id="hiddenCoupon" name="id" value="" type="hidden">

但对于前10行数据表，我可以设置id输入字段，但对于下一页数据表，它无法设置。如何使用值加载数据表，以便我可以轻松地设置为模态输入字段。

Answer 1

你可以试试这个：

$(function () {
    $(".updateCoupon").on('click', function () {
        var my_id_value = $(this).data('id');
        $(".modal-body #hiddenCoupon").val(my_id_value);
    })
});

Answer 2

你的代码工作正常。检查您是否获得了所有行的{{$ user-＆gt; id}}参数？

Answer 3

在生成DataTable时，似乎$（“。updateCoupon”）在下一页上不存在。试试这个：

$('#your_table_id').on('click', '.updateCoupon', function() {
  var my_id_value = $(this).data('id');
  // etc
});

Answer 4

你必须在dataTable渲染后定义click事件，即使在分页后进入下一页。 使用dataTable回调尝试此操作：

var myTable;

myTable = $('#example').DataTable({
   "sPaginationType": "full_numbers",
    data: dataSet,
    columns: columnDefs,
    "drawCallback": function( settings ) {
       $(".updateCoupon").click(function () {
          var my_id_value = $(this).data('id');
          $(".modal-body #hiddenCoupon").val(my_id_value);
       });
     }
});

我也创造了一个小提琴。 please see this link

在数据表的第一页之后无法在模态中设置值

4 个答案: