I am trying to use the below example from datatables : https://datatables.net/examples/data_sources/js_array.html , but when i am trying to retrieve data from a url as map , it is giving me error.
Below is the html code for this , i am hitting a mock api to get the object then iterating to get the object that datatable expect as input .
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var completeObject = {} ;
var employeeArray = [] ;
$.getJSON('https://run.mocky.io/v3/3a65891c-84c8-467e-b2e9-ecb1629e1c45', function(json_data){
$.each(json_data, function(k, v) {
var tem_arr = [] ;
tem_arr.push(v['name']);
tem_arr.push(v['position']);
tem_arr.push(v['office']);
tem_arr.push(v['extn']);
tem_arr.push(v['start_date']);
employeeArray.push(tem_arr);
});
console.log('check inner >>' + JSON.stringify(employeeArray) );
$('#example').DataTable({
data: employeeArray ,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
],
});
});
});
</script>
</head>
<body>
<div class="container">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Related
After getting the data from firebase, the first line in the datatable is showing no data available.
How should I correct this?
I know I'm only using one data set but I try with 10 data it's still showing that there is no data available in the first line.
I tried everything I know but nothing works.
Output
My js code
$(document).ready(function() {
$('#user_data').DataTable({
dom: 'Bfrtip',
colums: [
{ title: "USN" }, { title: "Email" }, { title: "Name" }, { title: "Password" }
],
targets: -1,
className: 'dt-body-right',
hover: 1,
});
});
var rootRef = firebase.database().ref().child("StudentID");
rootRef.on("child_added", snap => {
USN = snap.child("UserUSN").val();
Email = snap.child("Useremail").val();
Name = snap.child("Username").val();
Password = snap.child("Userpassword").val();
$("#table-body-pengguna").append("<tr><td>" + USN + "</td><td>" + Email +
"</td><td>" + Name + "</td><td>" + Password + "</td></tr>");
})
My html code
<body>
<table id="user_data" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>USN</th>
<th>Email</th>
<th>Name</th>
<th>Password</th>
</tr>
</thead>
<tbody id="table-body-pengguna">
</tbody>
</table>
$(document).ready(function() {
$('#example').DataTable({
"pageLength": 1,
ajax: "https://raw.githubusercontent.com/bmehler/employees/main/personal",
"columns": [{
"data": "id"
},
{
"data": "name"
},
{
"data": "job"
},
]
});
});
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
</tr>
</tfoot>
</table>
Just try this small example.
I'm using DataTables plugins (I'm a beginner) and I would like to add an 'id' in the <td> HTML tag. I did what's in this post but it's not what I want.
I saw this post too but I don't know how to use this code.
JS :
$('#datatable').dataTable({
"sPaginationType" : "full_numbers",
"createdRow" : function ( row, data_use, dataIndex ) {
$(row).attr('id', dataIndex);
},
data : data_use,
columns : column_name,
dom : 'Bfrtip',
select : 'single',
responsive : true,
altEditor : true,
destroy : true,
searching: true,
buttons : [{
extend : 'selected',
text : 'Edit',
name : 'edit'
}],
});
You can do this by adding a columnDefs array to your DataTable configuration and adding a createdCell function. For example:
$(document).ready(function() {
var table = $('#example').DataTable({
'columnDefs': [{
'targets': "_all", // this will invoke the below function on all cells
'createdCell': function(td, cellData, rowData, row, col) {
// this will give each cell an ID
$(td).attr('id', 'cell-' + cellData);
}
}]
});
Run the snippet below to see a complete example. You can right click on a cell (i.e., a td) and click "Inspect" to see the id attribute that is added to each cell.
$(document).ready(function() {
var table = $('#example').DataTable({
'columnDefs': [{
'targets': "_all",
'createdCell': function(td, cellData, rowData, row, col) {
$(td).attr('id', 'cell-' + cellData);
}
}]
});
// Add some data to the table
table.row.add(['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700']).draw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
I am working with datatables and I want to edit and delete data table records
When I do console.log(row) following output I get:
["user1", "Edit"]
(index):274 (2) ["user2", "Edit"]
(index):274 (2) ["user3", "Edit"]
(index):274 (2) ["user4", "Edit"]
(index):274 (2) ["user5", "Edit"]
What I want is to get data-id from render: function (data, type, row) which I have used in datatable script and when click on edit button I want to get specific id in alert but I am unable to extract data-id.
My jQuery code:
$.fn.dataTable.ext.errMode = 'none';
var table = $('#catgeory_list').DataTable({
processing: true,
language: {
emptyTable: 'no result found.'
},
columnDefs: [{
visible: true,
targets: 0,
render: function (data, type, full, meta) {
return data;
}
}, {
visible: true,
targets: 1,
render: function (data, type, row) {
console.log(row);
return '<button id="editBtn" class="btn btn-wrang btn-flat edit" name="editBtn" type="button">Edit</button>' + ' <button id="deleteBtn" class="btn btn-danger btn-flat delete" name="deleteBtn" type="button" >Delete</button>';
}
}
],
});
In order to get any source object/array property/item for the row being clicked, you don't need anything more than simple row().data() API method invoked against DataTable row (selected by the closest to the clicked button <tr> node):
$('table').on('click', 'tbody td button', function(){
const rowData = dataTable.row($(this).closest('tr')).data();
alert(`Row ID is ${rowData.id}`);
});
Here, dataTable is a variable, you assign your DataTable to.
Full-blown DEMO you might find below.
Also, considering your ultimate goal, you might find of use my answer over here, which provides complete working demo of editable DataTable. So, if you find that helpful, upvotes are appreciated ;)
//src data
const srcData = [
{id: 1, item: 'apple'},
{id: 2, item: 'banana'},
{id: 3, item: 'tomato'}
];
//datatables init
const dataTable = $('table').DataTable({
dom: 't',
data: srcData,
columns: [{data: 'item', title: 'Item Name', render: data => data+'<button>Show Id</button>'}]
});
//click handler
$('table').on('click', 'tbody td button', function(){
const rowData = dataTable.row($(this).closest('tr')).data();
alert(`Row ID is ${rowData.id}`);
});
td button {float: right}
<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><table></table></body></html>
You can wrap data or row parameter from callback function with jQuery $() to get any element/node attributes or DOM manipuation. Refer also toJQuery() for dealing with Datatables API instances.
Render
render: function(data, type, row, meta){
var data_id = $(data).data('id');
console.log('Columns.Render:',data_id);
return data + " : data-id(" + data_id+")";
}
createdRow
createdRow: function (row, data, index) {
var data_id = $('td a.edit_row', row).data('id');
console.log('CreatedRow:',data_id);
}
Click Event
$("a.edit_row").click(function(){
var data_id = $(this).data('id');
alert(data_id);
});
Working Live Demo:
$(document).ready( function () {
var table = $('#example').DataTable({
columnDefs: [
{
targets: 1,
render: function(data, type, row, meta){
var data_id = $(data).data('id');
console.log('Columns.Render:',data_id);
return data + " : data-id(" + data_id+")";
}
},
],
createdRow: function (row, data, index) {
var data_id = $('td a.edit_row', row).data('id');
console.log('CreatedRow:',data_id);
}
});
$("a.edit_row").click(function(){
var data_id = $(this).data('id');
alert(data_id);
});
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css"
rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>Edit</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Edit</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Edit</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
I have just gotten started with datatables and I was working with this example from the datatables docs, but I can't get the data to display .
This is the .html file:
<html>
<head>
<title>data</title>
<script href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script href="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": 'arrays.txt'
} );
} );
</script>
</body>
</html>
and this is the arrays.txt file:
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
]
]
}
The problem is that no data is displayed in the datatable.
You are importing datatable before jquery.
Since datatable requires jQuery, you must load jQuery first.
Also you should never import scripts on head. Put it on the end of your body tag, before the script tags.
I'd like my DataTable to scroll to the bottom whenever a row is added. I have tried multiple fixes for this problem, but none of them work.
Tested solutions:
How to load table in Datatables and have it scroll to last record automatically on load
Jquery DataTable auto scroll to bottom on load
Among others...
I think that what separates my case from the others, is that I am using DataTable with the D capitalized.
Anyway, here is my current code:
var table = $('#example').DataTable({
"createdRow": function( row, data, dataIndex )
{
$(row).attr('id', 'row-' + dataIndex);
},
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"scrollY": $(window).height()/1.5,
"scrollCollapse": true,
"paging": false,
});
for(var i = 1; i <= 20; i++){
table.row.add([
i,
'action'+i,
]);
}
table.draw();
table.rowReordering();
It would be nice if the table scrolled to bottom whenever a new row is added to it..
SOLUTION
To scroll to the bottom of the table, use the code below:
var $scrollBody = $(table.table().node()).parent();
$scrollBody.scrollTop($scrollBody.get(0).scrollHeight);
DEMO
$(document).ready( function () {
var table = $('#example').DataTable({
"createdRow": function( row, data, dataIndex ) {
$(row).attr('id', 'row-' + dataIndex);
console.log($(row).closest('table').parent());
},
"scrollY": $(window).height()/1.5,
"scrollCollapse": true,
"paging": false
});
$('#btn-add').click(function(){
for(var i = 1; i <= 10; i++){
table.row.add([
i,
i + '.2',
i + '.3',
i + '.4',
i + '.5',
i + '.6'
]);
}
table.draw();
// Scroll to the bottom
var $scrollBody = $(table.table().node()).parent();
$scrollBody.scrollTop($scrollBody.get(0).scrollHeight);
});
table.rowReordering();
} );
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/mpryvkin/jquery-datatables-row-reordering/95b44786cb41cf37bd3ad39e39e1d216277bd727/media/js/jquery.dataTables.rowReordering.js"></script>
</head>
<body>
<button id="btn-add" type="button">Add records</button>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</body>
</html>