table length in ajax table - javascript

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.

Related

How to insert link in to html href tag

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>';
}

Making text in a cell a button javascript

is there anyway to make this extra td a button so that every "show" is clickable?
$(document).ready(function(){
$.getJSON("http://cs1.utm.edu/~bbradley/map1/customers1.json", function(data){
var custData = '';
$.each(data, function(key, value){
custData += '<tr>';
custData += '<td>' +value.name+'</td>';
custData += '<td>' +value.address+'</td>';
custData += '<td>' +value.cityStateZip+'</td>';
custData += '<td>' +value.latLang+'</td>';
custData += '<td>' +(value.image || "No image available")+'</td>';
custData += '<td>' +"show"+ '</td>'; // this is what I need a button
custData += '</tr>';
});
I'm worried that I messed up by adding that extra column alongside the others being created with json data, but I'm not sure how else to add a button for every row.
I'm not sure I understand your question. But here is an example for you that prints row numbers when clicked 'show'.
function printRowNumber(row) {
alert('Row:' + row);
return false;
}
$(document).ready(function() {
const appDiv = document.getElementById('app');
$.getJSON("http://cs1.utm.edu/~bbradley/map1/customers1.json", function(data) {
var custData = '';
$.each(data, function(key, value) {
custData += '<tr>';
custData += '<td>' + value.name + '</td>';
custData += '<td>' + value.address + '</td>';
custData += '<td>' + value.cityStateZip + '</td>';
custData += '<td>' + value.latLang + '</td>';
custData += '<td>' + (value.image || "No image available") + '</td>';
custData += '<td>' + '<a href="javascript:void" onClick=printRowNumber(' + key + ')>show</a>' + '</td>'; // this is what I need a button
custData += '</tr>';
});
appDiv.insertAdjacentHTML('beforeend', '<table>' + custData + '</table>');
})});
If you want to use button instead of 'show' you can replace a tag with button.
custData += '<td>' +'<button onClick=printRowNumber('+key+')>show</button>'+ '</td>';

Dynamic Row addition to the Table

I want to add Array elements to the table.
Array elements are dynamic coming from the database. And i am creating the Row for adding the one row from the generated data and appending rowAfter to add the other array elements
Here is the code i have written -
var rowSpan = 0;
var rowSpan1 = 0;
for (element in data)
{
// get products into an array
var productsArray = data[element].products.split(',');
var QuantityArray = data[element].quantity.split(',');
var ChemistArray = data[element].Retailername.split(',');
var PobArray = data[element].Pob.split(',');
rowSpan = productsArray.length;
rowSpan1 = ChemistArray.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>';
row += '<td>' + QuantityArray[i] + '</td>';
} else {
rowAfter += '<tr><td>' + productsArray[i] + '</td><td>' + QuantityArray[i] + '</td>';
}
}
for (var k = 0; k < rowSpan1; k++) {
if(k == 0) {
row += '<td>' + ChemistArray[k] + '</td>';
row += '<td>' + PobArray[k] + '</td>';
} else {
rowAfter += '<td>' + ChemistArray[k] + '</td><td>' + PobArray[k] + '</td> </tr>';
}
}
row +=
'<td rowspan="'+rowSpan1+'">' + data[element].locations +'</td>'+
'<td rowspan="'+rowSpan1+'">' + data[element].area + '</td>'+
'</tr>';
$('#tbody').append(row+rowAfter);
So as per the code I can finely display ProductArray and Quantity Array
And But i am not able to display the Chemist array after one another.
In the above Image i want to display data( Kapila and Kripa below the Chemist column) Some where making issue with tr and td.
Any help would really appreciated.
Data is a JSON Response -
In my case, ChemistArray(Retailername in response) contains 4 names and POBArray 4 values.
You need to add an empty <td></td> as a "placeholder".
for (element in data) {
var productsArray = data[element].products.split(',');
var quantityArray = data[element].quantity.split(',');
var chemistArray = data[element].Retailername.split(',');
var pobArray = data[element].Pob.split(',');
// find the largest row number
var maxRows = Math.max(productsArray.length, quantityArray.length, chemistArray.length, pobArray.length);
var content = '';
var date = '<td rowspan="' + maxRows + '">' + data[element].date + '</td>';
var doctorName = '<td rowspan="' + maxRows + '">' + data[element].doctor_name + '</td>';
var locations = '<td rowspan="' + maxRows + '">' + data[element].locations + '</td>';
var area = '<td rowspan="' + maxRows + '">' + data[element].area + '</td>';
content += '<tr>' + date + doctorName;
for (var row = 0; row < maxRows; row++) {
// only add '<tr>' if row !== 0
// It's because for the first row, we already have an open <tr> tag
// from the line "content += '<tr>' + date + doctorName;"
if (row !== 0) {
content += '<tr>';
}
// the ternary operator is used to check whether there is items in the array
// if yes, insert the value between the <td></td> tag
// if not, just add an empty <td></td> to the content as a placeholder
content += '<td>' + (productsArray[row] ? productsArray[row] : '') + '</td>';
content += '<td>' + (quantityArray[row] ? quantityArray[row] : '') + '</td>';
content += '<td>' + (chemistArray[row] ? chemistArray[row] : '') + '</td>';
content += '<td>' + (pobArray[row] ? pobArray[row] : '') + '</td>';
// only add "locations + area + '</tr>'" if it is the first row
// because locations and area will span the whole column
if (row === 0) {
content += locations + area + '</tr>';
} else {
content += '</tr>';
}
}
$('#tbody').append(content);
}
content += '<td>' + (productsArray[row] ? productsArray[row] : '') + '</td>'; is just a short-hand for
content += '<td>';
if (productsArray[row]) {
content += productsArray[row];
} else {
content += '';
}
content += '</td>';
If there is item in the productsArray[row], let's say productsArray[0], which is 'Sinarest', then productsArray[row] would be truthy. Else, if there is no more products in the array, such as productsArray[3] will gives us undefined, which is a falsy value and the corresponding conditional will be ran.

how to assign multiple values to a button when loading table using javascript and json

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");
}

How to recreate a table dynamically in javascript

I am creating a table dynamically in a return statement from ajax. But I see only one row of the table, although debugger shows data.length as 4. How do I correct the recreating of table?
// using ajax return to recreate a table
// ...
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
var $mytablerow = $(
'<table>' +
'<tbody>' +
'<tr>' +
'<td id="td' + data[i].Value + '" >' +
data[i].Text +
'</td>' +
'</tr>' +
'</tbody>' +
'</table>'
);
}
}
var $mylst = $("#Userslist");
$mylst.html($mytablerow);
// ....
using ajax return to recreate a table
...
if (data.length > 0)
{
var $mytablerow = '<table><tbody>';
for (var i = 0; i < data.length; i++)
{
$mytablerow += $(
'<tr>' +
'<td id="td' + data[i].Value + '" >' + data[i].Text + '</td>' +
'</tr>');
}
$mytablerow += '</tbody></table>';
}
var $mylst = $("#Userslist");
$mylst.html($mytablerow);
....
I think you should use a variable outside the loop. For example:
if(data.length > 0) {
var $myTable = '<table><tbody>';
for (var i = 0; i < data.length; i++) {
$myTable += '<tr><td id="td' + data[i].Value + '" >' + data[i].Text + '</td></tr>';
}
$myTable += '</tbody></table>';
}
var $mylst = $("#Userslist");
$mylst.html($myTable);
You have problem in your script. To fix this problem replace by this script:
if (data.length > 0)
{
var $mytablerows = '<table>' + '<tbody>';
for (var i = 0; i < data.length; i++) {
$mytablerows += '<tr>' +
'<td id="td' + data[i].Value + '" >' + data[i].Text + '</td>' +
'</tr>';
}
$mytablerows += '</tbody>' + '</table>';
var $mylst = $("#Userslist");
$mylst.html($mytablerows);
}
That looks like you are creating a single row table each iteration and then only adding the last table you create. You need to create the table stuff once and then iterate to create the rows.

Categories

Resources