I have two arrays which is the result.new_record and the result.leave_type i have a loop, $(result.new_record).each(function(index, data) i want to include the result.leave_type and put the data of the result.leave_type to the table tbl_tag but the data says undefined but the data of result.new_record was shown only the result.leave_type is undefined.
here's the result of 'console.log` and the table.
Result of html += '<td>'+ JSON.stringify(leavetype) +'</td>';
jQuery Code
success : function(result)
{
result = JSON.parse(result);
var html = "";
$(result.new_record).each(function(index, data)
{
console.log(result.leave_type);
html += tbl_tag(data,result.leave_type);
});
$(".tbl-tag").html(html);
remove_tag();
}
function tbl_tag(data,leavetype)
{
var html = '<tr>';
html += '<td>' + data.payroll_employee_title_name + ' ' + data.payroll_employee_first_name + ' ' + data.payroll_employee_middle_name + ' ' + data.payroll_employee_last_name + ' ' + data.payroll_employee_suffix_name + ' <input type="hidden" name="employee_tag[]" value="'+data.payroll_employee_id+'"></td>';
html += '<td>'+ leavetype.payroll_leave_hours_cap +'</td>';
html += '<td><i class="fa fa-times"></i></td>';
html += '</tr>';
return html;
}
Update the below line in your tbl_tag function from
html += '<td>'+ leavetype.payroll_leave_hours_cap +'</td>';
to
html += '<td>'+ leavetype[0].payroll_leave_hours_cap +'</td>';
As you are passing Array to function you will select the 1st element by using [0] and then the value by using the property name like leavetype[0].payroll_leave_hours_cap
Related
var serial_no = 1;
if (response.length > 0) {
for (var count = 0; count < response.length; count++)
{
html += '<tr>';
html += '<td>' + response[count].id + '</td>';
html += '<td>€' + response[count].inkoopprijs + '</td>';
html += '<td>€' + response[count].verkoopprijs + '</td>';
html += '<td>' + response[count].producten + '</td>';
html += '<td><a href="../prijswijzigen.php?edit=' + response[count].id + '" class="edit_btn">Edit</td>';
html += '<td><a href="C_R_U_D.php?del=' + response[count].id + '" class="del_btn">Delete</td>';
html += '</tr>';
serial_no++;
}
} else {
html += '<tr><td colspan="3" class="text-center">No Data Found</td></tr>';
}
document.getElementById('post_data').innerHTML = html;
document.getElementById('total_data').innerHTML = response.length;
I have this for code for a data table, I made this to support a search function, but I can figure out how to set a table length. I want to set it to ten.
im curently working on a script that pulls data from google sheets and transforms it in to a html table. but i have links in my google sheets tabele so i want that these links get but in a button that looks nice but icant figure out how to do that.
i curently have this loob
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
html += '</tr>';
}
html += '</table>';
the entry[i]['gsx$link']['$t'] gets me the links i just cant get it to work inside a button
if you have any idea how i can solve this problem please help me
here is the Complete code
<!DOCTYPE html>
<meta charset="ISO-8859-1">
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
// ID of the Google Spreadsheet
var spreadsheetID = "1Xx0qGY_5Ic1KNB7m8Lu5mZqHE4XQzauvcugTVUGwgqk";
// Make sure it is public or set to Anyone with link can view
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";
// make JSON call to Google Data API
$.getJSON(url, function(data) {
// set global html variable
var html = '';
// build table headings
html += '<table>';
html += '<tr>';
html += '<th>Komponente</th>';
html += '<th>Name</th>';
html += '<th>Hersteller</th>';
html += '<th>Preis</th>';
html += '<th>Link</th>';
html += '</tr>';
// loop to build html output for each row
var entry = data.feed.entry;
/**
** Change to descending order
** for (var i = entry.length - 1; i >= 0; i -= 1) {
*/
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
html += '</tr>';
}
html += '</table>';
// output html
$('.console').html(html);
});
// loading animation
var loading = $('.loading');
loading.hide();
$(document)
.ajaxStart(function() {
loading.show();
})
.ajaxStop(function() {
loading.hide();
});
</script>
<div class="console"></div>
<div class="loading">
</div>
</body>
</html>
You just need to wrap the link inside <a> tag
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td><a href=' + entry[i]['gsx$link']['$t'] + '>' +entry[i]['gsx$link']['$t'] + '</a></td>';
html += '</tr>';
}
I have a data coming from the database. And Displaying when the ajax function is called. I am able to display it. But, One of the variable is an array data and saved it using implode function. Data is like (a,b,c,d).
Data is displaying in the below format
data1 Data2 Data3 (a,b,c,d) Data5 and so on.
I want to explode the array data and print one below the another.
I should display it like
data1 data2 data3 a data5
b
c
d
Here is the code which i am written to get the data.
<script type="text/javascript">
$('#genreport').on('click',function(){
var Representativeid = document.getElementById("Representativeid").value;
var dateFrom = document.getElementById("dateFrom").value;
var dateTo = document.getElementById("dateTo").value;
var url = '{{URL::to('/admin/GenReport')}}';
$.ajax({
type : 'get',
url : url,
data : {Representativeid:Representativeid,dateFrom:dateFrom,dateTo:dateTo},
success:function(data){
console.log(data);
var $tabledata = $('#tbody');
$tabledata.empty();
for (element in data)
{
var row = '<tr>' +
'<td>' + data[element].date + '</td>'+
'<td>' + data[element].doctor_name + '</td>'+
'<td>' #foreach(explode(',', data[element].products ) as $product)
{{$product}}
#endforeach '</td>' +
'<td>' + data[element].quantity + '</td>'+
'<td>' + data[element].locations +'</td>'+
'<td>' + data[element].area + '</td>'+
'</tr>';
$('#tbody').append(row);
}
},
error:function(data)
{
alert('fail');
alert(data);
}
});
});
</script>
I am failing in the for-each logic. Please help me to display as i expected.
You cannot use a php function/code(server-side) in your javascript/jQuery code(client-side), as the php code will be parsed before the page is loaded. Instead you need to use javascript code.
First, you need to split the value into an array
var productsArray = data[element].products.split(',');
then you would need to get the array count (.length) to use a rowspan, so it doesn't break your table stucture
var rowSpan = productsArray.length;
....
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
....
finally, you need to loop in javascript, not php, through the array. (note, because the i<0 <td>s go on subsequent rows, you need to add them after)
var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
if(i == 0) {
row += '<td>' + productsArray[i] + '</td>';
} else {
rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
}
}
so it would look something like this -
for (element in data)
{
// get products into an array
var productsArray = data[element].products.split(',');
// get products array count
var rowSpan = productsArray.length;
var row = '<tr>' +
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';
// loop through products array
var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
if(i == 0) {
row += '<td>' + productsArray[i] + '</td>';
} else {
rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
}
}
row +=
'<td rowspan="'+rowSpan+'">' + data[element].quantity + '</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].locations +'</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].area + '</td>'+
'</tr>';
// append both row and the <td>s in rowAfter
$('#tbody').append(row+rowAfter);
}
just add <tr><td> inside foreach.
Edit:
Also, take a look at this link. table inside a td
In the below code i have used a json array(pedingPLT) to load data to below html table. here each an every table data has got a single value. in a particular table data i have included an button.so is there any possibility to assign multiple values to the button (*********), i mean by using an array. kindly help me
function TSC_document_status_list_table_for_tsc_portal() {
var tableData;
$.post("model/tscAdminView.php", {action: 'TSC_document_status_list_table_for_tsc_portal'}, function (e) {
if (e === undefined || e.length === 0 || e === null) {
tableData = '<tr class="error"><td colspan="4"> No Data Found in database </td></tr>';
$('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
} else {
$.each(e, function (index, pedingPLT) {
index++;
tableData += '<tr>';
tableData += '<td>' + index + '</td>';
tableData += '<td>' + pedingPLT.document_id + '</td>';
tableData += '<td>' + pedingPLT.tsc_accepted_Or_Created_date +'</td>';
tableData += '<td>' + pedingPLT.total_allocated_days + ' days' + '</td>';
tableData += '<td>' + pedingPLT.Expired_date + '</td>';
tableData += '<td> <button class="btn btn-sm btn-alt m-r-5 delete_selected_employee" value="' + ******** + '"><i class="fa fa-trash-o fa-lg"></i> </button>' + pedingPLT.total_quantity +'</td>';
tableData += '<td>' + pedingPLT.Completed_phone_list + '</td>';
tableData += '<td>' + pedingPLT.peding_phone_list + '</td>';
tableData += '</tr>';
});
//Load Json Data to Table
$('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
}
}, "json");
}
The value attribute of button is of type "text" (source), so it's not possible to add multiple values to it.
That said, you are free to stringify a JSON-string in it as value, and parse it when you need it:
JSON.stringify()
(method documentation: JSON.stringify)
You can use data-value attribute in the button and put the json string in the data-value attribute.
function TSC_document_status_list_table_for_tsc_portal() {
var tableData;
$.post("model/tscAdminView.php", {action: 'TSC_document_status_list_table_for_tsc_portal'}, function (e) {
if (e === undefined || e.length === 0 || e === null) {
tableData = '<tr class="error"><td colspan="4"> No Data Found in database </td></tr>';
$('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
} else {
$.each(e, function (index, pedingPLT) {
var button_data_value = '{"document_id" : pedingPLT.document_id , "total_days" : pedingPLT.total_allocated_days }';
index++;
tableData += '<tr>';
tableData += '<td>' + index + '</td>';
tableData += '<td>' + pedingPLT.document_id + '</td>';
tableData += '<td>' + pedingPLT.tsc_accepted_Or_Created_date +'</td>';
tableData += '<td>' + pedingPLT.total_allocated_days + ' days' + '</td>';
tableData += '<td>' + pedingPLT.Expired_date + '</td>';
tableData += '<td> <button class="btn btn-sm btn-alt m-r-5 delete_selected_employee" data-value= "'+JSON.Stringify(button_data_value)+'"><i class="fa fa-trash-o fa-lg"></i> </button>' + pedingPLT.total_quantity +'</td>';
tableData += '<td>' + pedingPLT.Completed_phone_list + '</td>';
tableData += '<td>' + pedingPLT.peding_phone_list + '</td>';
tableData += '</tr>';
});
//Load Json Data to Table
$('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
}
}, "json");
}
Hi i have a javascript function that take the contents of a JSON file and the puts it in to a table, here is the code.
$.getJSON("People.json",
function(data) {
$.each(data.People, function(i, PersonObj) {
var Person = PersonObj[Object.keys(PersonObj)[0]];
content = '<tr>';
content += '<tbody>';
content += '<td>' + Person.Op + ' </td>';
content += '<td>' + Person.Name + ' </td>';
content += '<td>' + Person.WorkHours + ' </td>';
content += '<td>' + Person.Start + ' </td>';
content += '<td>' + Person.End + ' </td>';
content += '<td>' + Person.Clock + ' </td>';
content += '<td>' + Person.OFF + ' </td>';
content += '<td>' + Person.ON + ' </td>';
content += '<td>' + Person.OUT + ' </td>';
content += '</tr>';
content += '</tbody>';
content += '<p>';
$(content).appendTo("tbody");
console.log(Person);
});
});
However what i need is to some formatting via if statements so for example
normally i would use something like the badly put together bunch of If statements.
if (Person.clock !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'lime';
}
if (Person.Off !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'red';
}
if (Person.on !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'lime';
}
if (Person.out !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'red';
}
However i am struggling to find the best way of putting what i already have with the function for creating the table and putting the formatting from the If statements together
what would be the best way to do this?
Why not add a class to each such case. something like this:
$.getJSON("People.json",
function(data) {
$.each(data.People, function(i, PersonObj) {
var Person = PersonObj[Object.keys(PersonObj)[0]];
content = '<tr>';
content += '<td>' + Person.Op + ' </td>';
content += '<td>' + Person.Name + ' </td>';
content += '<td>' + Person.WorkHours + ' </td>';
content += '<td>' + Person.Start + ' </td>';
content += '<td>' + Person.End + ' </td>';
content += '<td class="'+(Person.clock? 'hasClock' : '') +'">' + Person.Clock + ' </td>';
content += '<td>' + Person.OFF + ' </td>';
content += '<td>' + Person.ON + ' </td>';
content += '<td>' + Person.OUT + ' </td>';
content += '</tr>';
$(content).appendTo("tbody");
console.log(Person);
});
});
and then add a class to your css:
.hasClock{
background-color :lime;
}
$.getJSON("People.json",
function(data) {
$.each(data.People, function(i, PersonObj) {
var Person = PersonObj[Object.keys(PersonObj)[0]];
content = '<tr>';
content += '<tbody>';
content += '<td class="op ' + Person.Op + '">' + Person.Op + ' </td>';
content += '<td>' + Person.Name + ' </td>';
content += '<td>' + Person.WorkHours + ' </td>';
content += '<td>' + Person.Start + ' </td>';
content += '<td>' + Person.End + ' </td>';
content += '<td>' + Person.Clock + ' </td>';
content += '<td>' + Person.OFF + ' </td>';
content += '<td>' + Person.ON + ' </td>';
content += '<td>' + Person.OUT + ' </td>';
content += '</tr>';
content += '</tbody>';
content += '<p>';
$(content).appendTo("tbody");
console.log(Person);
});
});
Add class to your td's with the value. If you have definite values coming up, then you can create css selectors for that with the CSS properties you want.
Suppose you had value of op as someOpValue
You could write your css like foloowing.
td.op.someOpValue{
background : red;
}