Develop Reference

Footable append with incoming data

I am trying to implement Footable on my website, but I encounter a problem whereby every time I added a new set of values into my footable, the table does not auto paginate it. which mean
even though I have set it to have a limit of 10
data-paging-size="10"
Every time I append into my table, it does not auto redraw and paginate. It will keep on adding to my current page and the size will keep increasing
<table id="myTable" class="table footable filter-dropdown-no bid-list-table " data-paging-size="10" data-sorting="true" data-filtering="true">
<thead>
<tr>
<th data-breakpoints="xs sm">Photo</th>
<th>Facebook Name/ID</th>
<th >Qty</th>
<th data-breakpoints="xs sm">Comment</th>
<th data-breakpoints="xs sm">Comment Time</th>
<th data-breakpoints="xs">Action</th>
</tr>
</thead>
<tbody >
````
</tbody>
</table>
Here is my javascript
function localStorageLiveUpdate(value){
$('.bid-item-customer-id-' + value.id).remove();
$('.footable-empty').remove();
var html = '<tr class="bid-item bid-item-' + value.id;
html += ' bid-item-customer-id-' + value.id + '" data-id="' + value.id + '" data-customer-id=" ' + value.customer_id + '">';
html += '<td data-fb-user-id="' + value.fb_user_id + '" style="display: table-cell;"></td>';
html += '<td style="display: table-cell;">' + value.from.name + '<p>(' + value.from.id + ')</p></td>';
html += '<td style="display: table-cell;"><form method="post" class="form-bid-item-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/action">';
html += '<input type="hidden" name="_token" value="' + value.csrf + '"><div class="input-group">';
html += '</div></form></td><td style="display: table-cell;">' + value.message + '</td><td style="display: table-cell;">' + timeCreated + '</td><td style="display: table-cell;">';
html += '<form method="post" class="form-bid-delete-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/delete/action">';
html += '<input type="hidden" name="_method" value="delete"><input type="hidden" name="_token" value="' + value.csrf + '">';
html += '</form></td></tr>';
$('.bid-list-table tbody').append(html);
}
Thanks for spending your time to help.

Your table size keep increase because every time you call the function "localStorageLiveUpdate" you are appending data and adding new line
// Add this line before appending new element
$('.bid-list-table tbody tr').remove();
$('.bid-list-table tbody').append(html);

How can I delete all the columns in the Dynamic DataTable?

First, I want to delete all the columns and then use the select command to bring all the columns back for perform the refresh operation on the DataTable without refreshing page. So I need a piece of code that I can delete all the columns.
I shared my html and javascript code as shown following.
Can someone help me about this regard?
//CSHTML
<table id="datatables" class="table table-striped table-no-bordered table-bigboy" cellspacing="0" style="width:100%;">
<thead>
<tr>
<th class="disabled-sorting">Room Plan</th>
<th>Name</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Room Plan</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</tfoot>
<tbody id="colmn">
#* *#
</tbody>
</table>
//*********************************JS*********************************//
//-------------------------SELECT ROOM START----------------------------
$.post("/Home/selectRooms", {}, function (data) {
var ndx = 0;
$.each(data.xroom_name, function (key, value) {
var Xroom_name = data.xroom_name[ndx];
var Xroom_plan = data.xroom_plan[ndx];
var column =
('<tr>' +
'<td>' +
'<div class="img-container">' +
'<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
'</div>' +
'</td>' +
'<td id="imgname">' + Xroom_name + '</td>' +
'<td class="text-right">' +
'<i class="fa fa-edit"></i>' +
'</i>' +
'</td>' +
'</tr>');
document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
ndx++;
});
});
I also delete the column information that I clicked like this:
var table = $('#datatables').DataTable();
table.on('click', '.remove', function (e) {
$tr = $(this).closest('tr');
table.row($tr).remove().draw();
e.preventDefault();
});
I want to delete all columns because of I can refresh the table immediately after adding, updating and deleting. I do not want to delete the column that I clicked only.

How to refresh tag without reloading page in google app script

I´m done in updating the cell and now I want to refresh automatically the tag after i click the button looped by on the table using google-app-script. Cannot understand the coding in the documentation. Please help me to solve this. Thanks!
html
<div id="tables">
<? var data = getData();?>
<table id="tableShift1">
<caption style="">Shift1</caption>
<th> ID </th>
<th> Ldap </th>
<th> Action </th>
<? for (var dataList = 1; dataList < data.length; dataList++) {
if (data[dataList][2] == '') {?>
<tr >
<td><?= data[dataList][0] ?></td>
<td><?= data[dataList][1] ?></td>
<td><button onclick='google.script.run.setApproved("<?=data[dataList][0]?> ","<?=data[dataList][1]?>")' id='btnApprove'>Approve</button></td>
</tr>
<? }
} ?>
</table>
<table id="tableShift2">
<caption>Shift2</caption>
<th> ID </th>
<th> Ldap </th>
<th> Action </th>
</table>
</div>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showData)
.getData();
});
function showData(things2) {
var table = $('#tableShift2');
var kwit = ',';
for (var i = 1; i < things2.length; i++) {
table.append('<tr ><td>' + things2[i][0] +
'</td><td style=>' + things2[i][1]+ things2[i][0] +
'</td><td ><button onclick="google.script.run.setApproved("'+ things2[i][0] +'","'+ things2[i][1] +'")" id="btnApprove">Approve</button></td></tr>');
}
}
</script>
</body>

You might try something like this:
Add and new function that provides the ability to return new data to refreshData()
function showData(things2) {
var table = $('#tableShift2');
var kwit = ',';
for (var i = 1; i < things2.length; i++) {
table.append('<tr ><td>' + things2[i][0] +
'</td><td style=>' + things2[i][1]+ things2[i][0] +
'</td><td ><button onclick="ApproveAndRefresh("'+ things2[i][0] +'","'+ things2[i][1] +'");" id="btnApprove">Approve</button></td></tr>');
}
}
function ApproveAndRefresh(data1,data2){//you may need to include i
google.script.run
.withSuccessHandler(refreshData)
.setApproved1(data1,data2);//a modified setApproved on the server that returns the appropriate html to the tableShift2 element
}
function refreshData(hl){
document.getElementById('tableShift2').innerHTML=hl;
}

Format table generated with .js file in Javascript

I have a table that is generated with data from a .js file. What I want to do is be able to format rows ex. give them different color. I know you can add a class like <tr class="yellowrow"></tr> but the way the code is I can't do it like that. I'm thinking a for loop might do.. any ideas?
<table id="data">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<script type="text/javascript" src="js/people.js"></script>//file with information
<script type="text/javascript" >
for(var i=0; i<Name.length;i++){
document.write('<tr><td>' + date[i] + '</td><td>' + amount[i] + '</td><td>'
+Name[i]'</td></tr>');//this brings in the data to generate the rows
}
</script>
</tbody>
//so this gives me a table with a couple of rows... how can i format each row they
need to have different classes because they cant all have the same format.like one
can be blue, another red, another blue..ect.

Short answer: You can use CSS to style the different rows.
tr:nth-child(2n){
background-color: #ccc;
}
tr:nth-child(3n){
background-color: #444;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Long, mostly unrelated answer: You shouldn't be using document.write. You can add to the tbody a lot more elegantly like this.
<table id="data">
...
<tbody></tbody>
</table>
<script>
var rows = [];
for (var i=0; i<Name.length; i++){
rows.push(
'<tr>' +
'<td>' + date[i] + '</td>' +
'<td>' + amount[i] + '</td>' +
'<td>' + Name[i] + '</td>' +
'</tr>'
);
}
document.querySelector('#data tbody').innerHTML = rows.join('');
</script>
Why is document.write considered a "bad practice"?

if your just looking to alternate the colors you could just use a css selector like:
tr:nth-child(odd)
http://www.w3.org/Style/Examples/007/evenodd.en.html

Mirroring a HTML table with Javascript/jQuery

I'm trying to mirror a table, with a dynamic grid like 4x4, 7x7, or 9x2.
I dynamically create this:
<table id="mainTable" class="mainClassTable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr id="row-1">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
<tr id="row-2">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
<tr id="row-3">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
</tbody>
</table>
I'm wondering what would be the best way for each row to get col-1 to move to col-4, and col-2 on col-3. And with uneven columns I fear it would be more complicated.
I found something about shuffling rows, but I want to shuffle columns.
I'm thinking about using jQuery selectors to tediously repositioning each td, but i'm wondering if there might be a nice jquery plugin to rearrange tables.
I don't want draggable, I just want one click to mirror the table (not the contents).
/Edit
So I tried making each col ID unique, but I ended up with this steaming pile of code:
function makeGrid(content, rowCount, colCount)
{
//Empty TD string
tableVarSet = "";
//gridTotal = gridTotal - gridTotal;
//Loop for multiple columns
for (c=1;c<=colCount;c++)
{
//make column var
tableVarSet = tableVarSet + makeColumns(content, c);
}
//Loop for multiple rows
for (i=1;i<=rowCount;i++)
{
//Make new Row
rowVarToAdd = "<tr id=TMPR>"+tableVarSet+"</tr>";
$("#mainTable").append(rowVarToAdd);
//Set new RowID
rowName = "row-" + i;
$("#TMPR").attr('id', rowName);
}
};
function makeColumns(content, count)
{
//Split String
tableVar1 = "<td id=col-"
tableNum = count;
tableVar2 = " onClick='imgClick(";
tableFunction = "this" ;
tableVar3 = ")'>"+content+"</td>";
//Combine Strings:
colVar = tableVar1 + tableNum + tableVar2 + tableFunction + tableVar3;
//Return result
return colVar;
};
So, yeah it kind of works but It can probably be a lot easier. (any ideas?)

Instead of using strings, consider DOM manipulation.
var rows = document.getElementById("mainTable").rows, cells, fragment = document.createDocumentFragment();
for(var i = 0, len = rows.length; i<len; i++){ //Iterate over each row
cells = rows[i].cells;
for(var j = cells.length-1; j>=0; j--) {
fragment.appendChild(cells[j]); //Remove the cells starting from the end and put them in a document fragment
}
rows[i].appendChild(fragment); //Append the fragment's contents to the current row
}
Demo on jsFiddle

First you should not be using multiple ID's with the same value! You should use classes.
Second of all, the below code works but you will need to change it to suit your application.
If you don't want the contents copied just remove the html() call on each of the cells.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table id="test">
<tr id="row-1"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
<tr id="row-2"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
<tr id="row-3"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
</table>
</body>
<div id="mirror"></div>
<script type="text/javascript">
var table = $('#test');
var OUTPUT = '<table id="test">';
for (var i = 1; i <= $('#test tr').length; i++){
OUTPUT += '<tr id="row-' + i + '">';
OUTPUT += '<td class="col-1">' + $('#row-' + i + " .col-3").html() + '</td>' + "\n";
OUTPUT += '<td class="col-2">' + $('#row-' + i + " .col-2").html() + '</td>' + "\n";
OUTPUT += '<td class="col-3">' + $('#row-' + i + " .col-1").html() + '</td>' + "\n";
OUTPUT += '</tr>';
};
OUTPUT += '</table>';
$('#mirror').html(OUTPUT);
</script>
</html>