Sorting dynamic table

[Kert]

I have an HTML page that makes a query to SQL database when clicking on button "OTSI". My problem is that after populating the table with the data, I cant sort it anymore. I am using a standard tablesorter library (TableSorter). Here is the page making the query: page with dynamic content and here is the same page static content: page with static content. The id of the table is countrytable.
What might solve my problem?

[radhakrishna.p]

hai Kert

what i guessed is

in your dynamic version page, you have to call the bellow method

$("#candidatetable").tablesorter(); 

the time after loading the results in table, not on the page load (what i mean is while loading the page there is no content in the table)

i think you got the point

check it once and let me know if you have any doubts in my clarification

happy coding

[radhakrishna.p]

in addtion to the above post:

try to do as follows

place this call $("#candidatetable").tablesorter(); inside the bellow function in your script code

$("#showTable").click(function(event){    
     // your code here 
    $("#candidatetable").tablesorter();
}

check it once and let me know the status

any comments are appreciated

[Kert]

This is so nice! Thanks a lot!

[radhakrishna.p]

please mark this thread as solved if you got your answer

[Kert]

A new problem. Im using test.js where I call .tablesorter() when "OTSI" button is pressed. But while pressing it several times and then clicking on a header, multiple rows of the same item show up. How to overcome the problem? The site is with static data, but the problem is the same with dynamic page.

[radhakrishna.p]

hai kert,

in the given url (a new problem),

i have seen nothing in test.js except alert('your book is overdue') but you are asking something related to that test.js related code.

could please explain me clearly about the problem or Show me an image of that problem?

so that we will try to give you a way to solution

happy coding

[Kert]

Sorry! I use the page for testing my code and I accidentaly added some testcode. Will fix it ASAP and then explain again.

[Kert]

Anways, I've fixed it. Here it is. Right after clicking OTSI for several times and then on table header, abnormal stuff happens with the table. Where the problem lies?

[radhakrishna.p]

hai Kert

i couldn't find any problem in that page

could you post me the error image or details of the problem here?

so that we will try to give a way to solution

hapopy coding

[Kert]

Picture

The problem appears when clicking to OTSI for several times and then clicking on the table header.

[Troy III]

Kert, there are certain unwritten rules we should know by hart and always follow:
First, you should mark this threat as solved [ because: it already is! ]; and
Second, you should start e different thread for your next problem, because
a different problem requires a different solution and of course a different thread.

Have fun.

[radhakrishna.p]

hai kert

i think what your problem is, when you click on the OTSI button results are appended to the table every time

if you want to refresh the results everytime when you click on otsi button

you just need to use the following call in your java script code

$('#candidatetable tbody tr').remove(); // it removes all inside<tr> tags of <tbody> tag in your table 

i mean place this call as follows in your dbquery.js

$("#showTable").click(function(event){

     $('#candidatetable tbody tr').remove();
    // your remaining code goes here as it is
}

i hope you got my point

please do the following modification and let me know the status

happy coding

[modified]

[Kert]

Thanks! But it doesnt seem to work :(.

Here is my function in dbquery.js

  $("#showTable").click(function(event){
    var params = "?";
    var fname = $("#eesnimi");
    var lname = $("#perenimi");
    var id = $("#kandidaadiNr")
    var party = $("#erakond");
    var region = $("#regioon");
    params += "fname=" + fname.val() + "&";
    params += "lname=" + lname.val() + "&";
    params += "id=" + id.val() + "&";
    params += "party=" + party.val() + "&";
    params += "region=" + region.val(); 
    var url = "/PopulateTable" + params;
    $.get(url ,function(responseJson) {
      if(responseJson!=null){
        $('#candidatetable tbody tr').remove();
        var table1 = $("#candidatetable");
        $.each(responseJson, function(key,value) { 
          var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
          rowNew.children().eq(0).text(value['id']); 
          rowNew.children().eq(1).text(value['first_name']); 
          rowNew.children().eq(2).text(value['last_name']); 
          rowNew.children().eq(3).text(value['party']);
          rowNew.children().eq(4).text(value['region']);
          rowNew.children().eq(5).text("VALI!");
          rowNew.appendTo(table1);
        });
      }
      $("#candidatetable").tablesorter();
    });
  });

And I had a deletion code in the script before, but changed it to your recommendation...still nothing.

[radhakrishna.p]

hai Kert

i am not sure but try to keep the call out side of the $.get() method call

$('#candidatetable tbody tr').remove();

just try it once and let me know

happy coding