I Want to open datatable's each row data in a popup onclick
I Want to open datatable's each row data in a popup onclick
shami
Posts: 5Questions: 3Answers: 0
My Script is this:
<script>
load();
function load(){
$("#lostitem tr").remove();
var row = "<tr><th>Item Name</th><th>Category</th><th>Description</th><th>Operations</th></tr>";
$("#tbheadli").append(row);
$("#lostitem").DataTable({
"ajax":{
"url":"file.php",
"dataSrc":"",
"type":"get",
data:{fn:"lostitm"}
},
"columns":[
{"data": "Item_Name"},
{"data": "category"},
{"data": "Description"},
{
data: null,
className: "center",
render: function ( data, type, row ) {
return '<a href="lostitem.php?resolved='+data.Item_NO+'" class="editor_edit">Resolved</a> / <a href="lostitem.php?delete='+data.Item_NO+'" class="editor_remove">Delete</a>';
}
}
],
select:true,
bDestroy:true,
"fnCreatedRow":function(R,data,index){
var p =data.Item_NO;
$(R).attr('lostitem',p);
}
});
}
$('#lostitem').on('click', 'tr', function () {
var name = $('td', this).eq(1).text();
$('#DescModal').modal("show");
});
</script>
<html>
<body>
HTML table for datatable
<table id="lostitem" class="display nowrap table-striped table-hover" >
<thead id="tbheadli">
</thead>
Html POPUP
<div class="modal fade" id="DescModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
<h3 class="modal-title"> //Header</h3>
</div>
<div class="modal-body">
//show data here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
<button type="button" class="btn btn-primary">Close</button>
</div>
</div>
</div>
</body>
</html>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
Hi @shami ,
It would be better to use
cell().data()to get the data, as in this example here.Cheers,
Colin