Tablesorter not sorting on dynamically added content - javascript

I have a problem with Jquery Tablesorter where I am adding data dynamically to a pre-existing table.
According to the docs, after adding content, all that needs to be done is for $("table").trigger("update") to tbe run to tell tablesorter than new content has been added, however in reality this appears not to work.
See http://jsfiddle.net/7Wurn/9/ for an example. Clicking on the HTML table headers will order the columns, but after adding a new row the new row does not get sorted.
It seems like something minor is wrong, as the example used on the Tablesorter website uses almost identical code to the code I've added on JSFiddle. The only difference is that the $("table").trigger("update"); is run as part of a callback after an Ajax call.
Any ideas what is wrong?

I also faced the same problem when using datatables in jQuery. When you are appending it to the table you are not appending the data to same tbody element. Instead your data is being added to a new tbody element. The table format should be<thead></thead> and then <tbody></tbody>.
Do something like this:
$("#tableId tbody").append(someContent);
I have updated your fiddle http://jsfiddle.net/7Wurn/68/. Also please use jquery 1.9.1. Its not working in 2.0b1. Don't know why

I have been playing with this and found that it's related to how, in the DOM, a tbody tag is being rendered.
I got it to work for the first entry by doing the following:
$("table tbody:first").before('<tr><td>Aaphod</td><td>Beeblebrox</td> <td>28</td> <td>$9.99</td> <td>20%</td><td>jul 6, 2006 8:14 am</td></tr>');
That's because it sticks it into the first tbody, and tablesorter recognizes it. However, subsequent additions cause it to be inserted as a new tbody tag.
I'm going to keep playing with it and will update if I get something!

Related

jquery - dynamic content inside a html table not getting recognised by .innerHtml code (JS / JQuery)

I have a HTML table in my web-application to which I allow my users to dynamically add rows using the onclick event.
However when I try to get the HTML contents of this table, (which is my objective) using either :
$("#table1").html()
or
var x = document.getElementById("table1").innerHTML;
I get only the initial table, and not the rows that were added dynamically.
Interestingly in jQuery when I use
$("#nutritiontable ").text()
I get details of the dynamic rows also, but obviously not the html tags for which I have use. I want both.
Want to know if I missed something, or if anyone knows of any other way to get the entire HTML table with the dynamic content and with the html tags intact.
If you add rows by
$("#table1").append("<tr><td>something</td></tr>")
Then
$("#table1").html()
Will give you everything.
You can use append() function in jQuery.
$("#tableid").append('<tr><td>Row text</td></tr>');

how to refreshing datatables jquery when manually updated

when you use jquery.tablesorter, and you manually update the table html, for example, append a tr element to the body
$("table tbody").append("<tr><td class='center'>value1</td><td>value2</td></tr>");
you can call
$('table').trigger("update");
and all works ok, now, i'v been asked to use jquery.datatables, and i'm trying to do the same but no result, i'm thinking to use the fnAddData function, but, what about if a need a css class in a td for styling like in the example above??, exist somthing in DataTables like the update of tablesorter??
need some help here
After a lots of test, this was my final solution to what i was trying to do, first, append the html to the table tbody, then call fnDestroy and dataTable again, this do exactly what i wanted
var a = $("table").dataTable();
$("table tbody").append("<tr><td class='center'>value1</td><td>value2</td></tr>");
a.fnDestroy();
a.dataTable();
hope its help someone else in the future

Empty and append expanding height of element

I'm running this code:
$('#storeTable').empty();
$('#storeTable').append("<tr>");
$('#storeTable').append("<td>");
$('#storeTable').append(returnData["1"]["ID"]);
$('#storeTable').append("</td>");
$('#storeTable').append("</tr>");
However if I run it multiple times in one page load, the 'storeTable' element gets taller and taller with every run. Am I missing something obvious, is this a gotcha of jQuery/JavaScript, is it the fault of my browser (Chrome), or am I doing something wrong?
The code obviously needs refining, I'm just trying to get a bare-bones implementation of a dynamic section of a page.
If you'd like any other details, please ask, rather than just downvoting without a comment.
storeTable is, of course, a table, too.
You can't use .append() to append partial pieces of HTML. .append() only appends whole formed objects and when it appends them it appends them as the last child of the target object.
To add to that, some browsers are picking about how you can or cannot create/remove content in tables.
Assuming #storeTable is the <table> tag, you could assign .html() to create a whole new table all at once:
$("#storeTable").html("<tr><td>" + returnData["1"]["ID"] + "</td></tr>");
Working demo: http://jsfiddle.net/jfriend00/5BVdX/
$('#storeTable').empty();
// Will create three rows, one after another
$('#storeTable').append("<tr><td>123</td></tr>");
$('#storeTable').append("<tr><td>456</td></tr>");
$('#storeTable').append("<tr><td>789</td></tr>");
// Will create three rows, each next replaces previous
$('#storeTable').html("<tr><td>123</td></tr>");
$('#storeTable').html("<tr><td>456</td></tr>");
$('#storeTable').html("<tr><td>789</td></tr>");

jQuery - Counting table rows not working in IE7

I'm coding an application that adds rows to a table without refresh using javascript and jquery. In order to append to the table, I need to do a count of the rows that are currently in the table. I'm using this code...
var count = $('#columns tr.FIELD').length;
The code works fine in Firefox and Chrome, but I am required to build around IE7. Is there any reason that IE returns a count of 0 while this selector works fine in other browsers?
Thanks.
I think IE7 might be inserting a hidden tbody tag in your table, which causes the selector to be incorrect.
Try $('#columns').find('tr.FIELD').length
More appropriately, make sure your table is semantically correct
<table>
<thead>[HEADER ROW]</thead>
<tbody>[CONTENT]</tbody>
</table>

Insert rows into table

What is the best plain javascript way of inserting X rows into a table in IE.
The table html looks like this:
<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>
What I need to do, is drop the old body, and insert a new one with 1000 rows. I have my 1000 rows as a javascript string variable.
The problem is that table in IE has no innerHTML function. I've seen lots of hacks to do it, but I want to see your best one.
Note: using jquery or any other framework does not count.
Here's a great article by the guy who implemented IE's innerHTML= on how he got IE to do tbody.innerHTML="<tr>...":
At first, I thought that IE was not
capable of performing the redraw for
modified tables with innerHTML, but
then I remembered that I was
responsible for this limitation!
Incidentally the trick he uses is basically how all the frameworks do it for table/tbody elements.
Edit: #mkoryak, your comment tells me you have zero imagination and don't deserve an answer. But I'll humor you anyway. Your points:
> he is not inserting what i need
Wha? He is inserting rows (that he has as an html string) into a table element.
> he also uses an extra hidden element
The point of that element was to illustrate that all IE needs is a "context". You could use an element created on the fly instead (document.createElement('div')).
> and also the article is old
I'm never helping you again ;)
But seriously, if you want to see how others have implemented it, take a look at the jQuery source for jQuery.clean(), or Prototype's Element._insertionTranslations.
Do as jQuery does it, eg. add <table> and </table> around it, insert into document and move the nodes you want to where you want them and ditch the temp-element.
the code ended up being this:
if($.support.scriptEval){
//browser needs to support evaluating scripts as they are inserted into document
var temp = document.createElement('div');
temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
var tb = $body[0];
tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
temp = null;
$body= $("#" + bodyId);
} else {
//this way manually evaluates each inserted script
$body.html(html);
}
Things that beed to exist beforehand: a table that has a body with id of 'bodyId'. $body is a global variable (or the function has a closure on it), and there is a bit of jquery in there too, because IE does not evalute scripts that are inserted into the html on the fly.
I had the same problem (as do lots of other people) and after a lot of playing around here's what I got to work.
You have to make a tr via document.createelement ('tr') then make a td, the same way.
appendchild the td to the tr, appendchild the tr to tbody (not table) THEN you can innerhtml the td you created and it will work.
This was ie8 I was using. Basically the table structure has to be made with createelement but the rest of it can be innerHTMLed. I was doing this watching in the IE8 debugger and it would say it would add it (if I did tr.innerhtml="blah") and give no error, but it wouldn't display, and the html dom view showed a very broken table (no td ever showed up, but the /td did)
So when finally I did the tr AND td by createelement calls, it created a correct looking dom and drew the page correctly.

Categories