欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

datatable jquery 刪除

林國瑞2年前9瀏覽0評論

在web開發中,使用jQuery的datatable插件可以方便地展示數據。然而,當我們需要刪除某些數據時,如何在datatable中實現呢?

首先,在datatable中刪除數據需要通過數據源來刪除,即刪除數據源中的數據,而不是直接在datatable中刪除。因此,我們需要保存數據源中的數據。在使用datatable時,有兩種保存數據源的方式:

<table id="example">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<?php foreach($data as $d): ?>
<tr data-id="<?php echo $d['id']; ?>">
<td><?php echo $d['id']; ?></td>
<td><?php echo $d['name']; ?></td>
<td><?php echo $d['age']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>

其中,data-id屬性用于保存每條數據的ID。如果數據源是一個JSON數據,可以通過以下方式保存:

$('#example').DataTable( {
"ajax": "/data.json",
"columnDefs": [
{
"targets": -1,
"data": "id",
"render": function ( data, type, full, meta ) {
return '<button data-id="'+data+'" class="delete">Delete</button>';
}
},
]
} );

在這里,我們通過定義一個render函數,在最后一列添加了一個Delete按鈕,并且按鈕的data-id屬性保存了當前行的id值。

接下來,我們需要通過jQuery的事件委托機制,對這些按鈕進行綁定。代碼如下:

$('#example tbody').on('click', '.delete', function () {
var row=$(this).closest('tr');
var id=row.data('id');
$.ajax({
url:'/delete.php',
type:'POST',
data:{'id':id},
success:function(response){
table.row(row).remove().draw(false);
}
})
});

在這里,我們通過closest方法找到當前行,然后通過data方法獲取當前行的id值,再通過ajax方法發送刪除請求,并在請求成功后刪除當前行。

以上就是在jQuery的datatable中實現刪除操作的方法。通過保存數據源的方式,再結合事件委托和ajax技術,實現了datatable中數據的刪除操作。