Develop Reference

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.

Trying to bind column dynamically in a table using jquery

I am trying to bind column dynamically in a table using jQuery .but click event is not working while trying to click 'btnASizeR' and 'btnWdDelete' button event is not working .Any idea would be appreciated.
$(function() {
var i = 0;
$('#btnASizeR').click(function() {
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var i = $("#WireDimTbl tbody>tr").length + 1;
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' value='2.00' />";
var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' value='3.00' />";
var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnWdDelete').click(function() {
$("#WireDimTbl tbody>tr:last").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class='text-left'><strong>Wire Dimensions</strong></td>
</tr>
<tr>
<td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
<td>
<input type="button" id="btnASizeR" value="AddSizeRange" />
<input type="button" id="btnWdDelete" value="Delete" />
<table id="WireDimTbl" class="table table-bordered">
<thead>
<tr>
<th class="text-center">Size Range Min (mm)</th>
<th class="text-center">Size Range Max (mm)</th>
<th class="text-center">Tolerance (-)mm</th>
<th class="text-center">Tolerance (+) mm</th>
</tr>
</thead>
<tbody></tbody>
</table>
</td>
</tr>

You mentioned that you are loading the table dynamically. Do you mean that when the page first loads the table is missing and its added later?
If that is the case, are you sure the code is called that binds the click events? The above example binds the events on page_load however, if the buttons are not yet available on the page it won't be able to bind it. JQuery will not automatically bind future elements.
Try settings a console.log($('#btnASizeR')); before binding the click event to make sure that JQuery can actually find the button.

How to create webgrid or table for my data

This is my html codes
<table>
<tr>
<td><label style="text-align:left">Cari Kod:</label></td>
<td><input type="text" id="cariKod" value="" /> </td>
</tr>
<tr>
<td> <label style="text-align:left">Cari İsim:</label></td>
<td><textarea rows="4" id="cariAd" cols="50" name="comment" form="usrform"></textarea></td>
</tr>
<tr>
<td><label style="text-align:left">Adres:</label></td>
<td><textarea rows="4" id="Adress" cols="50" name="comment" form="usrform"></textarea></td>
</tr>
<td><button id="btn1" />Okey</td>
</table>
This is my jquery codes
<script>
$(document).ready(function () {
$('#myform input').on('change', function () {
$("#btn1").click(function () {
var sonuc = ($("#cariKod").val() + $("#cariAd").val() + $("#Adress").val());
console.log(sonuc);
})
})
});
</script>
ı want to do a table or webgrid for my data input help pls.

You must to write something like this
HTML
<div id="tableResult"></div>
JAVASCRIPT - JQUERY
var table = "<table>",
tableEnd = "</table>"
$("#btn1").click(function () {
table += "<tr><td>"+$("#cariKod").val() + "</td></tr>"
table += "<tr><td>"+$("#cariAd").val() + "</td></tr>"
table += "<tr><td>"+$("#Adress").val() + "</td></tr>"
table += tableEnd;
$("#tableResult").html(table)
})

<fieldset>
<table id="dinamiktablo">
<tr>
<td>
<div id="tableResult"></div>
</td>
</tr>
tr += "<tr>";
tr += "<td>" + $("#cariKod").val() + "</td>"
tr += "<td>" + $("#cariAd").val() + "</td>"
tr += "<td>" + $("#Adress").val() + "</td>"
tr += "</tr>";
$("#dinamiktablo").append(tr)
its fixed

Foo Table its not working startly phone screensize

I using footable plugin for my projects.
But ,Its not working startly with phone screen.
Firstly i change screen size from chrome developer tools its workly fine like this,
but its not working when my codes rework on the phone screen.so like this
My html code ;
<div id="tablelistDiv">
<div class="row">
<table id="tbl_search" class="footable" data-page-size="20">
<thead>
<tr>
<th data-toggle="true" data-sort-ignore="false">Sıra No</th>
<th data-sort-ignore="false">Ünvan</th>
<th data-hide="phone" data-sort-ignore="false">Şube</th>
<th data-hide="phone" data-sort-ignore="false">Broker</th>
<th data-hide="phone" data-sort-ignore="false">Durum</th>
<th data-hide="phone" data-sort-ignore="false">Kayıt Tar.</th>
<th data-hide="phone" data-sort-ignore="true"><i class="fa fa-search"></i></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<div class="pagination pagination-centered hide-if-no-paging"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
My Js Code is,
function detayKayitlar(jsondata, status) {
obj = JSON.parse(jsondata);
var tableHtml = "";
for (var i = 0; i < obj.length; i++) {
tableHtml = tableHtml
+ "<tr>"
+ "<td>" + obj[i].ID + "</td>"
+ "<td>" + obj[i].UNVAN + "</td>"
+ "<td>" + obj[i].SUBE + "</td>"
+ "<td>" + obj[i].BROKER + "</td>"
+ "<td>" + obj[i].USERLASMA + "</td>"
+ "<td>" + obj[i].KAYITTAR + "</td>"
+ "<td><button onclick='detayKayit(" + obj[i].ID + ",2);' class='btn btn-block btn-danger' type='button'><i class='fa fa-search'></button></td>"
+ "</tr>";
}
$("#tbl_search tbody").append(tableHtml);
jQuery(function () {
jQuery('#tbl_search').footable();
});
pWaitHide();
hideDiv('search');
showDiv('list');
}

Since your chrome is in desktop, it is working fine. Please check weather you have added the below line in your header tag or not. This view port will detect the screensize.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

what do you mean with rework? if you doing something dynamically you
can run $('#tbl_search').trigger('footable_redraw');
from #Almis on first row comment.
Thank you

jQuery: How to update row number when first row added?

I've a table like this:
<table class="table table-striped table-bordered table-hover table-condensed" id="table">
<tr>
<td>rowNumber</td>
<td>Product Name</td>
<td>Price</td>
</tr>
<tr>
<td>1</td>
<td>item1</td>
<td>250000</td>
</tr>
<tr>
<td>2</td>
<td>item2</td>
<td>250000</td>
</tr>
</table>
I also adding new row this way (data will be adding to table when new record added):
if ($('#table').length) {
$('#table tr:first').after("<tr>" +
"<td>" + ? + "</td>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Price + "</td>" +
"</tr>");
}
As you can see, I add new row to the first row of the table. Now I want to add new row with rowNumber 1 then all other rowNumber get update.
Any idea?

Once you have appended the new row, you can set the rowNumber going through all rows (except the first one):
if ($('#table').length) {
$('#table tr:first').after("<tr>" +
"<td></td>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Price + "</td>" +
"</tr>");
$("#table tr:not(:first-child) td:first-child").each(function(index,item){
$(this).text(index+1);
});
}
Fiddle