Bootstrap确认始终采用第一行的id参数

Question

我使用Codeigniter，在我的视图中，显示的产品数据与每行的文本删除链接。这是我的代码：

HEAD

<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>

MODEL

//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;
}

VIEW

 <!-- 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，而不是总是先行。 提前谢谢。

Answer 1

我认为您应该将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>";



    }

我希望它有效