Question

我想使用模态对包含表的模态进行确认删除，因为使用confirm()不起作用。该表本身以模式存在。这是我桌子的一些照片当我单击删除按钮时，它将显示弹出窗口确认删除。但是确认删除弹出窗口中的删除按钮不起作用。这是我的表格代码：

<table class="table table-striped table-bordered table-hover table-condensed table-checkable order-column" id="lapkinerja-grafik-admin">
    <thead>
        <tr>
            <th width="5%">No.</th>
            <th width="60%">Nama File</th>
            <th width="25%">Bulan</th>
            <th width="10%">Action</th>
        </tr>
    </thead>
    <tbody>
            <?php 
            $no = 1;
            foreach($grafikAdmin as $key => $row) { 
                $filename = $row['NAMA_FILE'];?>
                <tr class="isi-row">
                    <td><?php echo $no++;?></td>
                    <td>
                        <a href="<?php echo base_url();?>sms/download_grafik/index?fileName=<?php echo $filename;?>"><?php echo $filename;?></a>
                    </td>
                    <td><?php echo $row['BULAN'];?></td>
                    <td>
                        <button id="delete" class="delete-button" value="<?php echo $row['ID_FILE'];?>" data-value="<?php echo $filename;?>" type="button" data-toggle="modal" data-target="#delete-modal">
                            Delete
                        </button>
                    </td>
                </tr>
            <?php } ?>
    </tbody>
</table>

确认删除弹出式代码：

<div class="modal fade" id="delete-modal" role="dialog">
    <div class="modal-dialog modal-sm">
        <!--modal delete content start-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <h5>Are you sure to delete this?</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id="del-alert" class="btn btn-danger btn-del">Delete</button>
            </div>
        </div>
        <!--modal delete content end-->
    </div>
</div>

这是我的JavaScript代码：

$('#lapkinerja-grafik-admin').on('click', '#delete',function(e) {
   e.preventDefault();
   var table = $('#lapkinerja-grafik-admin').DataTable({
       "retrieve": true,
       "columns": [
                   null,
                   null,
                   null,
                   {
                       "sortable": false
                   }
                  ]
   });

   $('#delete-modal').on('show.bs.modal', function() { 
       $('.btn-del').click(function() {
          console.log($(this).parent());
          table.row($(this).parents('.isi-row')).remove().draw(false);
       });

   });

});

Answer 1

请尝试一下可能会起作用：

$('#lapkinerja-grafik-admin').on('click', '.delete-button',function(e) {
  $parent = $(this);
   e.preventDefault();
   var table = $('#lapkinerja-grafik-admin').DataTable({
       "retrieve": true,
       "columns": [
                   null,
                   null,
                   null,
                   {
                       "sortable": false
                   }
                  ]
   });

   $('#delete-modal').on('show.bs.modal', function() { 
       $('.btn-del').click(function() {
          console.log($parent.parent());
          table.row($parent.parents('.isi-row')).remove().draw(false);
       });

   });

});

Answer 2

我已将按钮类型更改为Bootsrap确认按钮

 <table class="table table-striped table-bordered table-hover table-condensed table-checkable order-column" id="lapkinerja-grafik-admin">
        <thead>
            <tr>
                <th width="5%">No.</th>
                <th width="60%">Nama File</th>
                <th width="25%">Bulan</th>
                <th width="10%">Action</th>
            </tr>
        </thead>
        <tbody>
                <?php 
                $no = 1;
                foreach($grafikAdmin as $key => $row) { 
                    $filename = $row['NAMA_FILE'];?>
                    <tr class="isi-row">
                        <td><?php echo $no++;?></td>
                        <td>
                            <a href="<?php echo base_url();?>sms/download_grafik/index?fileName=<?php echo $filename;?>"><?php echo $filename;?></a>
                        </td>
                        <td><?php echo $row['BULAN'];?></td>
                        <td>

    <button class="btn btn-primary" data-toggle="confirmation" data-confirmation-event="myevent" value="<?php echo $row['ID_FILE'];?>" data-value="<?php echo $filename;?>">Delete</button>
                        </td>
                    </tr>
                <?php } ?>
        </tbody>
    </table>

通过JavaScript启用确认：

$('[data-toggle=confirmation]').confirmation({
  rootSelector: '[data-toggle=confirmation]',
  // other options
});

官方文档：http://bootstrap-confirmation.js.org/

如何通过模式

2 个答案: