please help how to put delete button in each row
please help how to put delete button in each row
jemz
Posts: 131Questions: 40Answers: 1
Hi, I successfully load the data to my datable,but the problem is that how can I put delete button in each row.
Thank you in advance.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTablesBootstrap.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"start": 0,
"ajax": {
url:"querydata2.php"
},
"columns": [
{ "data": "id"},
{ "data": "empno"},
{ "data": "firstname"},
{ "data": "lastname"}
]
} );
} );
</script>
</head>
<body>
<div class="container">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>EMPNO</th>
<th>FIRSTNAME</th>
<th>LASTNAME</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The simplest way I can think of would be to just add an additional column into the data returned from the server. You could populate it with something like "<span class='deleteButton' id='{value from ID column}'>Delete</span>", and then you can use something like jQuery UI's .button() to turn them into buttons.
You'll also need to set up an event handler on the buttons that'll make the appropriate web service call to the server to delete the clicked row.
I am confuse,how to do that, you mean to build the button in my server side ?
Yes - you can add the html for the button into a new column that gets returned from the server, and then once the datatable is initialized in the browser, transform the html into the buttons via a function that could be called from initComplete callback.
I got it !.thanks