How to pull data out from datatable - ajax

Question

I have create a click function to show modal....
Inside modal I create a datatable to show item_id and quantity.
If I want to pull the other data to put inside modal... HOw to make it...
In console.log show i still have item_name etc can pull BUT now Im only know how to set inside datatables.
This code can use for click tbody then show modal. simple and nice to use.
$('#stock-enquiry-table tbody').on('click', 'tr', function () {
var data = table.row(this).data();
**console.log(data);**
$('#selected-item-id').val(data.item_id);
table_item.ajax.reload();
$('#modal-content').modal({
show: true
});
});
Please teach show the data inside modal but not in datatable.
Thank

Answer 1

You seem to be half way done, actually more than half way
you have all the data in variable data
You just need to write the javascript to set the data into the modal.
I'd suggest writing a generic function for it.
function setDataInModal(data) {
$('#input1').val(data.key1);
$('#input2').val(data.key2);
$('#input3').val(data.key3);
...
}
call the function before $('#modal-content').modal({show: true});
Update after conversation in comments
var data = [{
item_id: "2",
item_code: "PA",
name: "Product A",
short_description: null,
description: null
},
{
item_id: "3",
item_code: "PAA",
name: "Product AA",
short_description: null,
description: null
},
{
item_id: "4",
item_code: "PAAA",
name: "Product AAA",
short_description: null,
description: null
}
]
$('#table').DataTable({
data: data,
columns: [{
data: 'item_id',
title: 'id'
},
{
data: 'item_code',
title: 'code'
},
{
data: 'name',
title: 'name'
},
{
title: 'actions',
render: function(data, type, row) {
return '<button class="btn btn-primary" onclick="showEditModal(this)">edit</button>'
}
}
]
})
function showEditModal(el) {
var data = $(el.closest('table')).DataTable().row(el.closest('tr')).data();
$('#modal #id').val(data.item_id);
$('#modal #code').val(data.item_code);
$('#modal #name').val(data.name);
$('#modal').modal('show');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table id="table"></table>
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" id="id" placeholder="id">
<input type="text" id="code" placeholder="code">
<input type="text" id="name" placeholder="name">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->