We Keep Coding

Html to DataTable -> Loop all rows of table instead of looping the ones only in the current page

I have a datatable like below in my asp.net-4.5 page:
Name City Value Action
A B 10 delete
X Y 10 delete
T R 10 delete
ALL ALL 30
An HTML table is converted into such a datatable via $(#example).datatable()
When the "Delete" link is clicked, the regarding row is being deleted and the value of the row including ALL is being updated in javascript. So here, if I remove the first row, the table will be like below WITHOUT any page refresh.
Name City Value Action
X Y 10 delete
T R 10 delete
ALL ALL 20
One issue here is that the row having ALL TOTAL can be anywhere else, it is not always at the end of the table. The user can re-sort the table by clicking a column. For example, if Value column is clicked, the row including ALL will be the first row.
At this point, I want to locate where the row is located. To do that I have a for loop like below:
for (var i = 0, r; r = document.getElementById("example").rows[i]; i++) {
if ($('#example').find("tr:eq(" + i + ")").find("td:eq(2)").html() == 'ALL') {
locateALLrow = i;
break;
}
}
This for loop above works perfectly, when there is 1 page of data only (One page includes 10 rows). So my questions:
1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
2- Is there a better way to locate the index of the row including ALL (as Name column).
Any advice would be appreciated. Thanks!
EDIT: Tried the loop like below, didn't fix:
for (var i = 0; i<document.getElementById("example").getElementsByTagName("tr").length; i++)
{...}

1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
Instead of traversing the html table which shows only first n rows data when using pagination, try working with the datatable API. You'll be able to loop through complete data with that.
https://datatables.net/reference/api/rows().data()
2- Is there a better way to locate the index of the row including ALL (as Name column).
Same as above.Use datatable API instead of looping through current html shown data.

HTML Radio button table need to build it dynamically

I was doing some re factoring for a page, In that page I have bunch of radio buttons group.Data for the radio buttons comes from database and sometimes from cache layer.
I will probably be having close to 100 radio buttons. I need to arrange them in 5 column 20 rows.
Data population happens via arraylist. I was thinking for converting this arraylist into json and then using it to lay out the radio buttons in the HTML table format.
I know there are many plugins out there for building tables,however they are not meeting my requirements.How do I built 5 rows 10 column table with my data on the fly.
Something like
<tr>
<td>radio1</td>
<td>radio2</td>
<td>radio10</td>
</tr>
<tr>
<td>radio11</td>
<td>radio12</td>
<td>radio20</td>
The caveat here is that I do not know in advance as how much data I m going to get for the table.
Appreciate some thoughts.

Loop through your JSON object.
Use mod ('%') to append a new tr every ten items
Output td items (with content) to the last tr added.
If you're using jQuery, try something like this:
var holderDiv = $('#myDivId');
var i = 0;
var myData = jQuery.parseJSON(response);
$.each(myData, function(key,value) {
if(i == 0 || i == i%10){
holderDiv.append('<tr>');
}
holderDiv.find('tr:last-child').append('<td>' + value + '</td>');
i++;
}

Counting how many rows are added to table via javascript

So im building a table in which the client is allowed to add more rows inorder to add more data to the table.
How can i count the total number of rows that is added to the table?
here is the example which for whatever reason doesn't actually work on jsfiddle, but just to get an idea of the functionality.
http://jsfiddle.net/ScEzz/1/
so say the user adds 5 rows 3 times and 15 rows once, the result should be (5*3)15+15 +original 1 = 31

You should be able to keep track in your code, but aside from that, you can do this...
var count = document.getElementbyId("mytable").rows.length;
Or with jQuery if you want...
var count = $("#mytable > tr").length;

$("#mytable tr").length-1
This gets you teh number of trs minus 1 for the header.
Since you're already using jQuery, you can make the code a cleaner by doing some things in jQuery instead of JS.
Select elements with $('#mytable');
Create an element with just a begin tag in jQuery: var row = $('<tr>');
Use jQuery's append method table.append(row);

jquery DataTables.net plugin: how to ignore specific rows when sorting

After a long exhausting search, I have found no answer to my question anywhere. Basically I have dynamically creating a table based on inputs by a user and also inserting a row with only a button after every 4th entry in the table. What I need is for the sorting function to ignore the rows with the button and leave them in place while sorting the rest of the table. Does anyone know if this is even possible?

You don't - what to do is use DataTables fnDrawCallback to insert your fourth row on each draw. DataTables will always empty the <tbody> element on each draw, so this would be required anyway.

"fnDrawCallback": function (oSettings) { }
var rows = $('.searchResultRow');
rows.each(function (index) {
if (index == 4 || index == 9) {
var insertLearn = $("<tr></tr>").addClass("searchResultRow ");
insertLearn.append(buildCell().attr('colspan', 9).html("<img src='../img/LearnMoreAnimated_v1-1.gif' />"));
$("#results_table > tbody > tr").eq(index).after(insertLearn);
}
});
}
was how I was able to get it....thanks for the help in pointing me in the right direction.

jQuery: Total values in textboxes automatically

I have a series of textboxes with the following IDs:
118|1/9/2011
118|1/10/2011
118|1/11/2011
118|1/12/2011
118|1/13/2011
118|1/14/2011
118|1/15/2011
118|Total
Using jQuery or just javascript, I need to sum each textbox and assign the value to the total textbox. This needs to happen when a user tabs off or clicks off the textbox. It also needs to be generic enough to handle textboxes with similar IDs such as:
119|1/9/2011
119|1/10/2011
119|1/11/2011
119|1/12/2011
119|1/13/2011
119|1/14/2011
119|1/15/2011
119|Total
The format stays the same. Only the first numbers to the left of the | will change.
Any guidance would be greatly appreciated.

EDIT: I updated my answer to reflect the actual example HTML that Mike provided, which you can view in this fiddle. That link also contains the working javascript from below.
If you have a specific selector for the inputs you want to sum (like a class name), as well as one for the total, you should be able to do this (here's a fiddle link with this javascript in action: http://jsfiddle.net/avidal/zfjmD/):
$('input.sum').change(function() {
var sum = 0;
// we want to sum up the values of all input.sum elements that are in the same tr
// as this one
$(this).closest('tr').find('input.sum').each(function(i) {
var val = parseInt($(this).val(), 10);
/*
change the above line to:
var val = parseFloat($(this).val());
if the inputs will be floats
*/
if (isNaN(val) || val === undefined) {
return;
}
sum += val;
});
$(this).closest('tr').find('input.total').val(sum);
});
The important things to note are the .closest() function, and the .find() function.
First, we bind to the change event for all inputs with a class of sum. When one of those elements is changed (the value changes, then the user clicks/tabs out), we look for the closest tr element, then find the list of inputs with a class of sum that are children of that tr. For each of those inputs, we parse the value and accumulate the sum. After we've iterated over each of those inputs, we finally find the input with a class of total that's a descendant of the closest tr, and set the val of that input to the accumulated sum
Perfect!

Great question and great answer! This works perfectly! To answer Mike, I changed 'tr' to 'table' in the jQuery and it totals all the sums in a table across several tr's and td's. As long as the inputs have the class="sum" they will be totaled.