jquery footable $('#classes').trigger('footable_redraw'); return hidden table

Question

this is my first Question, may be hard to understand.

calling $('#classes').trigger('footable_redraw'); , it return the data but hide the table heading and data rows,but when i used $('#classes').trigger('footable_initialize'); its work fine but reduplicate the data . Ajax method is called on submitting form.

  $.ajax({
url : baseurl+'index.php/settings/classes/viewclasses',
success : function(data) {
$('.classestbody').append(data);
$('#classes').trigger('footable_redraw'); }
});

How can i only get my updated data in table after saving any Values by calling submitting for saving ?

Answer 1

Basically you need to check to see if the data is in the table already. If the data is not in the table, add it; if it is in the table, don't. You'll need some way to positively identify a row that matches the data. If data is an array, you'll need to loop through the array and check each row.

Another option would be to use a data binding framework. This would allow you to bind the data to the table, then you just add/update/delete rows from the data and the framework takes care of updating the table (view) for you.

I personally use Knockout.js. They have a really good tutorial: http://learn.knockoutjs.com/. Even if you don't end up using Knockout.js, I think the tutorial is pretty cool and it will only take you a couple of hours to go through all of them.

Answer 2

If your script on index.php/settings/classes/viewclasses always returns the hole table, and since you said the data gets duplicated this seems to be the case.

Then it is easier to delete all rows then add them all again, just add $('.classestbody').empty(); before $('.classestbody').append(data);. Your code would look like this:

$.ajax({
    url : baseurl+'index.php/settings/classes/viewclasses',
    success : function(data) {
        $('.classestbody').empty();
        $('.classestbody').append(data);
        $('#classes').trigger('footable_redraw'); 
        }
});