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.
Related
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);
I am making multiple ajax request using JQuery to populate table rows. How to sort the table column. I am using the first API to fetch all symbol's value. The second API is used to find the values of that particular symbol. These values are appended into table. I want to use sorting on columns of the table.
tablesorter() is is a function which sorts table is not working. This is working fine for a simple table.
Here is my code.
<script type="text/javascript">
// HTTPRequest
var value = [];
$.ajax({
method: "GET",
url: "https://api.binance.com/api/v1/exchangeInfo"
})
.done(function(data){
data.symbols.forEach(function(element, index) {
value[index] = element.symbol;
$(".tablefriendsname").append("<tr><td>" + element.symbol + "</td></tr>");
$.ajax({
method: "GET",
url: "https://api.binance.com/api/v1/ticker/24hr?symbol=" + data.symbols[index].symbol
})
.done(function(data2){
$(".tablefriendsname2").append("<tr><td>" + data2.priceChange + "</td></tr>");
$(".priceChangePercent").append("<tr><td>" + data2.priceChangePercent + "</td></tr>");
$(".weightedAvgPrice").append("<tr><td>" + data2.weightedAvgPrice + "</td></tr>");
$(".prevClosePrice").append("<tr><td>" + data2.prevClosePrice + "</td></tr>");
$(".lastPrice").append("<tr><td>" + data2.lastPrice + "</td></tr>");
$(".lastQty").append("<tr><td>" + data2.lastQty + "</td></tr>");
$(".bidPrice").append("<tr><td>" + data2.bidPrice + "</td></tr>");
$(".bidQty").append("<tr><td>" + data2.bidQty + "</td></tr>");
$(".askPrice").append("<tr><td>" + data2.askPrice + "</td></tr>");
$(".askQty").append("<tr><td>" + data2.askQty + "</td></tr>");
$(".openPrice").append("<tr><td>" + data2.openPrice + "</td></tr>");
$(".highPrice").append("<tr><td>" + data2.highPrice + "</td></tr>");
$(".lowPrice").append("<tr><td>" + data2.lowPrice + "</td></tr>");
$(".volume").append("<tr><td>" + data2.volume + "</td></tr>");
$(".quoteVolume").append("<tr><td>" + data2.quoteVolume + "</td></tr>");
$(".openTime").append("<tr><td>" + data2.openTime + "</td></tr>");
$(".closeTime").append("<tr><td>" + data2.closeTime + "</td></tr>");
$(".firstId").append("<tr><td>" + data2.firstId + "</td></tr>");
$(".lastId").append("<tr><td>" + data2.lastId + "</td></tr>");
$(".count").append("<tr><td>" + data2.count + "</td></tr>");
$('#myTable').trigger('update');
}) // closed Inner done
}) // CLOSE FOREACh
}); // CLOSE outer DONE
<!-- Sorting Columns -->
$(document).ready(function()
{
$("#myTable").tablesorter();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.5/js/jquery.tablesorter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Crypto Api Fetch</title>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th class="">symbol</th>
<th class="">priceChangePercent</th>
<th class="">weightedAvgPrice</th>
<th class="">prevClosePrice</th>
<th class="">lastPrice</th>
<th class="">lastQty</th>
<th class="">bidPrice</th>
<th class="">bidQty</th>
<th class="">askPrice</th>
<th class="">askQty</th>
<th class="">openPrice</th>
<th class="">highPrice</th>
<th class="">lowPrice</th>
<th class="">volume</th>
<th class="">quoteVolume</th>
<th class="">openTime</th>
<th class="">closeTime</th>
<th class="">firstId</th>
<th class="">lastId</th>
<th class="">count</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="tablefriendsname"></td>
<td class="tablefriendsname2"></td>
<td class="priceChangePercent"></td>
<td class="weightedAvgPrice"></td>
<td class="prevClosePrice"></td>
<td class="lastPrice"></td>
<td class="lastQty"></td>
<td class="bidPrice"></td>
<td class="bidQty"></td>
<td class="askPrice"></td>
<td class="askQty"></td>
<td class="openPrice"></td>
<td class="highPrice"></td>
<td class="lowPrice"></td>
<td class="volume"></td>
<td class="quoteVolume"></td>
<td class="openTime"></td>
<td class="closeTime"></td>
<td class="firstId"></td>
<td class="lastId"></td>
<td class="count"></td>
</tr>
</tbody>
</table>
</body>
</html>
Load jQuery first.
Don't append a row into a cell; create a row string, add each cell, then append it to the table:
.done(function(data2){
var tr = '<tr><td class="symbol">' + element.symbol + '</td>';
// array of each table column in order
['priceChangePercent', ..., 'count'].forEach(item => {
tr += '<td class="' + item + '">' + data2[item] + '</td>';
});
$('#mytable).append(tr).trigger('update');
});
In my case, my HTML and javascript:
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr = '<tr>' +
'<td></td>' +
'</tr>';
$('tbody').append(tr);
};
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center"><i class="glyphicon glyphicon-plus"></i></th>
</thead>
</table>
I want to make it like this
1.
2.
3.
............
You can use css counters for this
check the following code snippet
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr = '<tr>' +
'<td>hello</td>' +
'</tr>';
$('table tbody').append(tr);
};
tbody {
counter-reset: row;
/* Set the row counter to 0 */
}
tbody tr::before {
counter-increment: row;
/* Increment the row counter*/
content: counter(row) ": ";
/* Display the row */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center">AddRow</th>
</thead>
<tbody></tbody>
</table>
Try this:
var i = 1;
function addRow() {
var tr = '<tr>' +
'<td>' + i + '.</td>' +
'</tr>';
$('tbody').append(tr);
i++;
};
Define a variable (i in the example below) outside of the function and then increment the variable after each append.
var i = 1;
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr ='<tr>'+
'<td>'+ i +'.</td>'+
'</tr>';
$('tbody').append(tr);
i++;
};
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center"><i class="glyphicon glyphicon-plus"></i></th>
</thead>
<tbody></tbody>
</table>
Your html, you need to add tbody
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center">
<i class="glyphicon glyphicon-plus"></i>
</th>
</thead>
<tbody>
</tbody>
</table>
and then your script:
$('.addRow').on('click', function() {
addRow();
});
//Define row number
var rowNum = 1;
function addRow() {
var tr = '<tr>' + '<td>' + rowNum + '</td>' + '</tr>';
$('tbody').append(tr);
rowNum++;
};
Here's a working example: https://jsfiddle.net/o46asuyb/1/
You'll want to have a global variable to keep track of the row you're currently at:
var row = 1;
function addRow() {
var tr='<tr>'+
'<td>'+ (row) + '. </td>'+
'</tr>';
row++;
$('tbody').append(tr);
}
$('.addRow').on('click', function() {
addRow();
});
You have two problems with your code. First, you don't actually have a <tbody> element, so you have nothing to append to. Second, you need to use a loop that will increase the number to display.
Here's a working sample:
$('.addRow').on('click', function() {
addRow();
});
var i = 1;
function addRow() {
var tr = '<tr>' +
'<td>' + i + '</td>' +
'</tr>';
$('tbody').append(tr);
i++;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center">Add Row</th>
</thead>
<tbody>
</tbody>
</table>
Hope this helps! :)
I have a table built dynamically in my view, I populated a table with values from a jquery popup modal dialog. What i am trying to accomplish is getting each cell in the row and assigning it to variable, at which point I am going to post the data to the database via an ajax call
I am fairly new to JS and jnquery and following many examples, I cant seem to figure out to assign the cell values to the variable, I have included the code below.
Here is the html for the table
<div class="row">
<div class="col-md-12">
<table id="myTest" class="table table-responsive">
<thead>
<tr>
<th>Sku Number</th>
<th>Product Name</th>
<th style="width:300px">Description</th>
<th>Quantity</th>
<th>Border</th>
<th>Ink Color</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="padding:10px 0; text-align: right; ">
<input id="submit" type="button" value="Save Order" class="btn btn-warning" style="padding: 10px 20px; margin-right: 15px;" />
</div>
</div>
Here is the JS for populating the table
function addItem() {
var remove = $('<input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" />');
var td = $("<td></td>");
td.append(remove);
var valid = true;
allFields.removeClass("ui-state-error");
if (valid) {
$("#myTest tbody").append(
"<tr>" +
"<td>" + skuNumber.val() + "</td>" +
"<td>" + productName.val() + "</td>" +
"<td>" + description.val() + "</td>" +
"<td>" + quantity.val() + "</td>" +
"<td>" + border.val() + "</td>" +
"<td>" + inkColor.val() + "</td>" +
"</tr>");
dialog.dialog("close");
$("#myTest > tbody tr:last").append(td);
//console.log(td);
}
return valid;
}
And when you hit the submit button I want to create a list of objects that contains each row in the table, and this is where I am having problems.
$("#submit").click(function () {
var isAllValid = true;
var list = [];
$("#myTest tbody tr td")
.each(function(index, ele) {
var orderItem = {
SkuNumber: skuNumber.val(),
ProductName: productName.val(),
Description: description.val(),
Quantity: quantity.val(),
Border: border.val(),
InkColor: inkColor.val()
};
list.push(orderItem);
console.log(orderItem);
});
I am trying to fill html table(my table got 3 columns) with data from json using javascript but the data never get filled using div method! could any tell me how to fill content of table rows using without using div ?
for(i in json)
{
var div = "<tr id=\""+i+"\">\n" +
"<td>"+i+"</td>\n" +
"<td><img src=\""+ json[i].thumb +"\" height=\"42\" width=\"42\"></td>\n" +
"<td>\n" +
"" + json[i].title + "<br> \n" +
"<br></td></tr>\n\n";
$("#myDiv").append(div);
}
Table to be filled:
<table id="list" cellspacing="0" border="1">
<tr>
<th>Item#</th>
<th>Logo</th>
<th>Description</th>
</tr>
<div id='myDiv'></div>
</table>
This Your new table:
<table id="list" cellspacing="0" border="1">
<thead>
<tr>
<th>Item#</th>
<th>Logo</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And code:
var html = '';
for(var i in json)
{
html += '<tr id="'+i+'">';
html += '<td>'+i+'</td>';
html += '<td><img src="'+json[i].thumb+'" height="42" width="42"></td>';
html += "<td>";
html += "" + json[i].title + "<br/><br/>";
html += '</td>';
html += '</tr>';
}
$('#list > tbody').html(html);