我使用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> <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> <a href='$delete?id=$id' data-id='$row->articleId' data-fancybox-type='iframe' data-toggle='confirmation' class='btndelete confirmation-callback' >Delete</a></td>
</tr>";
}
我希望它能成功