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.
Related
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>
How to get the data object on click the cell.I have created the table and used datatable.I want to get the geography and customer type from the cell click I have tried as
$('#table tbody').on( 'click','td', function () {
//alert ('clicked');
//var data1 = table.row().data();
var data1 = table.row( $(this).parents('tr') ).data();
console.log(data1);
alert( data1[0] +"'s Customer type: "+ data1[ 2 ] );
} );
my table id is table and I got the response as below in console for console.log(data1);
{Geography: "APAC", Current: "0", CustomerType: "AMRevenue", DSO: "0", OverDue: "0"}
getting undefined for data1[0] how to get the geo and customer type
First you need to assign variable as table for datatable initialize & in datatable there is one initComplete method so from this method to get table id by dynamically and then use click method functionality inside initComplete method as below code. So tr of tbody & get value table.row(this).data() method.
I hope below snippet will help you a lot.
$(document).ready(function() {
var table = $('#table').DataTable({
columns: [
{ title: "Geography" },
{ title: "Current" },
{ title: "Customer Type" },
{ title: "DSO" },
{ title: "OverDue" }
],
initComplete: function(settings, json){
$('#'+settings.sTableId+' tbody tr').on('click', function(){
var data = table.row(this).data();
console.clear();
console.log('Geography=> '+data[0]);
console.log('Customer Type=> '+data[2]);
});
}
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<table id="table" class="display" style="width:100%; text-align: center;">
<tbody>
<tr>
<td>APAC</td>
<td>0</td>
<td>AMRevenue</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>CAAP</td>
<td>1</td>
<td>CARevenue</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>JAPA</td>
<td>1</td>
<td>JARevenue</td>
<td>1</td>
<td>0</td>
</tr>
</tbody>
</table>
If you add a click event on td and click on each td, you can be able to get the value of that td's data by using $(this).text();. Have a look at the snippet below and after running the snippet click on the td and see the value.
$("#myTable tbody td").click(function () {
console.log($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table" id="myTable">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Burl</td>
</tr>
</tbody>
</table>
Update: If you click on a specific row and want to get the entire row's data you can simply follow this way:
$("#myTable tbody td").click(function () {
var row = $(this).closest("tr"); // Find the row
var cell1 = row.find("td:nth-child(1)").text(); // Find the first cell's data
var cell2 = row.find("td:nth-child(2)").text(); // Find the second cell's data
console.log(cell1 + " " + cell2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Burl</td>
</tr>
</tbody>
</table>
I think you miss some little thing, just check my code:
<table id="table" class="display" width="100%"></table>
In file javascript:
var dataSet = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
]
];
$(document).ready(function () {
$("#table").DataTable({
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
});
var table = $("#table").DataTable();
$("#table tbody").on("click", "tr", function () {
var data = table.row().data();
console.log('data', data);
alert(data[0] + "'s salary is: " + data[5]);
});
});
You will get your data in row
I want to show the result by using JQuery
I'm using dataTables library for table to show the result. I want to apply following computation on 2 columns using datatables jquery or ajax like
I have two arrays var arr1 = [2,3,4,5]; and var arr2 = [4,3,3,1];
(4*2+3*3+4*3+5*1) Total=34
Using DataTables for this table
This is the pic of table result format i want to show like.
$(document).ready(function() {
var t = $('#example').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"order": [
[1, 'asc']
]
});
t.on('order.dt search.dt', function() {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<table width="100%" class="display" cellspacing="0" id="example">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
<th>Current Sales * 1.5</th>
<th>(-) Closing Balance</th>
<th>Current Order</th>
<th>Distributor</th>
<th>Date</th>
</tr>
</thead>
</table>
jsfiddle
$(document).ready(function() {
// multiply nsp and closing balance
$.each(dataSet, function(i, row) {
row.total = row.nsp * row.closing_balance;
});
// Table definition
var dtapi = $('#example').DataTable({
data: dataSet,
"deferRender": false,
"footerCallback": function(tfoot, data, start, end, display) {
var api = this.api();
// adding product of nsp and closing_balance
// here column 5 contains product so change it
// accordingly
var p = api.column(5).data().reduce(function(a, b) {
return a + b;
}, 0)
$(api.column(5).footer()).html(p);
$("#total").val(p);
},
"order": [1],
"columns": [
// rest of the columns
{
data: "id"
}, {
data: "product_name"
}, {
data: "nsp"
}, {
data: "closing_balance",
}, {
data: "date",
}, {
data: "total"
}
]
});
});
// DataTable data set used
var dataSet = [{
"id": "Airi",
"product_name": "Satou",
"nsp": 230,
"closing_balance": 23,
"date": "28th Nov 08",
}, {
"id": "Angelica",
"product_name": "Ramos",
"nsp": "191",
"closing_balance": 131,
"date": "9th Oct 09",
}, {
"id": "Ashton",
"product_name": "Cox",
"nsp": 191,
"closing_balance": 37,
"date": "12th Jan 09",
}];
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table class="display" id="example">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</tfoot>
<tbody></tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />
I am using the dynatable.com plugin to create a table of of schools that are stored in our database. The table can be filtered so does not always show the total number of schools. We do not display a 'number of pupils' column but are trying to show a 'total number of pupils' summary at the bottom of the table.
html on the page is as follows:
<table id="dynatable">
<thead>
<tr>
<th data-dynatable-column="id">ID</th>
<th data-dynatable-column="schoolName">School Name</th>
<th data-dynatable-column="contactName">Contact Name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3"><span id="numPupils"></span> Pupils</td>
</tr>
</tfoot>
</table>
Followed by the JS:
<script>
$('#dynatable').dynatable({
dataset: {
ajax: true,
ajaxUrl: '/my/json/page.json',
ajaxOnLoad: true,
records: []
}
});
</script>
And a sample of the JSON retrieved (note the additional totalNumPupils field at the bottom):
{
"records": [
{
"id": "1",
"schoolName": "ABC School",
"contactName": "Terry"
},
{
"id": "17",
"schoolName": "DEF School",
"contactName": "Claire"
},
{
"id": "45",
"schoolName": "GHI School",
"contactName": "Barry"
}
],
"queryRecordCount": 3,
"totalRecordCount": 450,
"totalNumPupils": 794
}
I am trying to establish if there is a way to access the responseJSON.totalNumPupils that is requested by dynatable's ajax call or whether I would have to perform my own ajax call, ascertain the number of pupils, then pass in the JSON to the dynatable function afterwards?
Please see the code snippet. You can use normal AJAX to get the JSON payload, then populate the dynatable with the data from the AJAX response, while simultaneously accessing the unique totalNumPupils property.
$('#dynatable').dynatable({
dataset: {
ajax: true,
ajaxUrl: 'https://api.myjson.com/bins/1ezw8l',
ajaxOnLoad: true,
records: []
}
});
$.ajax({
url: 'https://api.myjson.com/bins/1ezw8l',
success: function(data) {
$('#dynatable').dynatable({
dataset: {
ajax: false,
records: data
}
});
$('#numPupils').text("Total Pupils: " + data.totalNumPupils);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.css" rel="stylesheet" />
<table id="dynatable">
<thead>
<tr>
<th data-dynatable-column="id">ID</th>
<th data-dynatable-column="schoolName">School Name</th>
<th data-dynatable-column="contactName">Contact Name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3"><span id="numPupils"></span> Pupils</td>
</tr>
</tfoot>
</table>
I am trying to add edit and delete button in data table.
I have html
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</tfoot>
</table>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>"
});
});
I tried adding column in thead and tbody but it is giving me alert saying
DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
Server returning data
{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger","Nixon"],["Garrett","Winters"],["Ashton","Cox"],["Cedric","Kelly"],["Airi","Satou"],["Brielle","Williamson"],["Herrod","Chandler"],["Rhona","Davidson"],["Colleen","Hurst"],["Sonya","Frost"],["Jena","Gaines"],["Quinn","Flynn"],["Charde","Marshall"],["Haley","Kennedy"],["Tatyana","Fitzpatrick"],["Michael","Silva"],["Paul","Byrd"],["Gloria","Little"],["Bradley","Greer"],["Dai","Rios"],["Jenette","Caldwell"],["Yuri","Berry"],["Caesar","Vance"],["Doris","Wilder"],["Angelica","Ramos"],["Gavin","Joyce"],["Jennifer","Chang"],["Brenden","Wagner"],["Fiona","Green"],["Shou","Itou"],["Michelle","House"],["Suki","Burks"],["Prescott","Bartlett"],["Gavin","Cortez"],["Martena","Mccray"],["Unity","Butler"],["Howard","Hatfield"],["Hope","Fuentes"],["Vivian","Harrell"],["Timothy","Mooney"],["Jackson","Bradshaw"],["Olivia","Liang"],["Bruno","Nash"],["Sakura","Yamamoto"],["Thor","Walton"],["Finn","Camacho"],["Serge","Baldwin"],["Zenaida","Frank"],["Zorita","Serrano"],["Jennifer","Acosta"],["Cara","Stevens"],["Hermione","Butler"],["Lael","Greer"],["Jonas","Alexander"],["Shad","Decker"],["Michael","Bruce"],["Donna","Snider"]]}
Can anyone help me solve this issue
You just need to add its HTML in your DataTable definition
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>",
"columns": [
{
"targets": -1,
"data": null,
"orderable": false,
"defaultContent": [
"<i class='glyphicon glyphicon-edit'></i>"+
"<i class='glyphicon glyphicon-trash'></i>"]
}
]
} );
DEMO : https://jsfiddle.net/Prakash_Thete/evfchh7q/
Change your table definition as below(Added one more header as you are sending data for two columns + edit button column).
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</tfoot>
</table>