引导确认总是取第一行的id参数


Bootstrap confirm always take id parameter of first row

我使用Codeigniter,在显示产品数据的视图中,我为每一行都添加了文本删除链接。这是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/bootstrap-confirmation.js'); ?>"></script>

模型
//table with all articles and some articles data
 public function filldata(){
    $this->db->order_by("articleId", "asc"); 
    $data = $this->db->get('articles');
    echo "<table class='table' id='data'>";
    echo   "<thead><th>Name</th><th>Price</th><th>On stock</th><th>Sex</th>";
    foreach ($data->result() as $row){
        $edit = base_url('apanel/edit');
        $delete = base_url('apanel/delete');
        //article data and links
        echo "
                <tr>
                    <td>$row->articleName</td>
                    <td>$row->articlePrice</td>
                    <td>$row->articleLager</td>
                    <td>$row->articleType</td>
                    <td><a href='$edit' data-id='$row->articleId' data-fancybox-type='iframe' class='btnedit'>Edit</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='$delete' data-id='$row->articleId' data-fancybox-type='iframe' data-toggle='confirmation'  class='btndelete confirmation-callback' >Delete</a></td>    
                </tr>";

    }
    echo "</table>"; 
    exit;
}
<<h3>视图/h3>
 <!-- response from ajax -->
<div id="showResponse" class="table-responsive"></div>

<div id="fill"></div>

<script type="text/javascript">
var $s = jQuery.noConflict();
$s(document).ready( function (){
     //make table and fill with article data
      fillgrid();
           var btnedit='';
           var btndelete = '';
    function fillgrid  (){
         // ajax request for filling table
        $s.ajax({
            url:"<?php echo base_url('apanel/filldata') ?>",
            type:'GET',
            success:function(data){
                $s('#fill').append(data);
            }
        }).done(function (data){
            $s("#fill").html(data);
            //selector for edit
            btnedit = $s("#fill .btnedit");
            //selector for delete
            btndelete = $s("#fill .btndelete");

            var deleteurl = btndelete.attr('href');
            var editurl = btnedit.attr('href');
            //delete record
            // problem is here  
             $s('[data-toggle="confirmation"]').confirmation({
                      onConfirm: function(e){ 
                       e.preventDefault();
                     var deleteid=btndelete.data('id');

                       //ajax request for deleting data
                     $s.ajax({
                    url:deleteurl,
                    type:'POST' ,
                    data:{id:deleteid}
                    }).done(function (data){
                    $s("#showResponse").html(data);
                    fillgrid();

                });
            }


 });




           //edit records
                btnedit.on('click', function (e){
                    e.preventDefault();
                       var editid = $s(this).data('id');
                        //show in fancybox
                          $s(".btnedit").fancybox({
                        maxWidth    : 800,
                        maxHeight   : 600,
                        fitToView   : false,
                        // 'scrolling'      : 'yes',
                        width       : '100%',
                        height      : '100%',
                        autoSize    : false,
                        closeClick  : false,
                        openEffect  : 'none',
                        closeEffect : 'none',
                         href:"<?php echo base_url()?>apanel/edit/"+editid


                     })


                // $s.colorbox({
                // href:"<?php // echo base_url()?>apanel/edit/"+editid,
                // top:50,
                // width:800,
                // onClosed:function() { fillgrid(); }
                // });
            });
       });

    }
});
</script>

当我点击链接删除一些行总是采取第一个显示行的id和删除的第一行。如何我的ajax调用采取id时,我点击链接的行属于该链接,并删除单行,不总是第一。

我认为你应该传递ID作为Get参数,像这样,例如:

foreach ($data->result() as $row){
        $edit = base_url('apanel/edit');
        $delete = base_url('apanel/delete');
        $id = $row->articleId;
        //article data and links
        echo "
                <tr>
                    <td>$row->articleName</td>
                    <td>$row->articlePrice</td>
                    <td>$row->articleLager</td>
                    <td>$row->articleType</td>
                    <td><a href='$edit?id=$id' data-id='$row->articleId' data-fancybox-type='iframe' class='btnedit'>Edit</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='$delete?id=$id' data-id='$row->articleId' data-fancybox-type='iframe' data-toggle='confirmation'  class='btndelete confirmation-callback' >Delete</a></td>    
                </tr>";

    }

我希望它能成功