A Unique Scenario Needing Assistance

jcrawford

Hello Guys. I am doing work with a Facebook application and I am working on using DataTables to administer the "test users" from Facebook. I am trying to use some AJAXY stuff so that the page can have a form, button, and datatable. Generally I would just make this use server side processing however in this instance I cannot. The reason I cannot is because the FB API does not allow for pagination in the requests or filtering :)

What I am trying to do is this. On the initial load of the page the table is generated (in html) from the test users that are fetched from FB. This works well and the DataTable displays and operates nicely. Where the trouble comes in is when I try to make a fieldset above the datatable that has the following items.

TextBox (quantity)
Button.

When the button is clicked it gets the value of the quantity text box and fires off the api request to FB to generate X test users.
Then I have to make an API request to FB and reload the table (would love to do this without reloading the page)

At-first I was thinking server-side processing but it's not possible as stated above.

Is there a way I could do something like: // loop over the response from FB generating the table rows and then $("#myTable").html($newData); oTable.fnDraw(); or would this not work either?

jcrawford

It does not appear that this will work, does this mean there is no way to do this without reloading the page every-time?

[code]
$("#addUsersBtn").click(function(){
var quantity = ($("#addUsersQuantity").val() == '') ? 1 : $("#addUsersQuantity").val();

$.ajax({
url: '/admin/qatooladdtestusers?quantity='+quantity,
success: function(data) {
$('#messages').html('Added '+quantity+' test users.');
$('#messages').show();

var rows = (data.length - 1);
var tableData = '';
for(x=0; x <= rows; x++) {
tableData += ' '+data[x].id+''+data[x].first_name+''+data[x].last_name+''+data[x].gender+''+data[x].locale+'';
}

$("#dataTableBody").html(tableData);
oTable.fnDraw();
},
});
});
[/code]

The above code does create a new Facebook Test User but it does not seem to add it to the table data and redraw the table. When I refresh the page the new records shows in the table.

How could I do this so that I would not need a page refresh? I am trying to make this use ajax so that I don't have to reload the page so often.

Thanks,
Joseph Crawford

jcrawford

I figured out that you can dynamically add rows but in my case the system is returning all rows so I figured out how to clear my table first. Not sure this is the best way, might make it not return the entire table and only the "new" rows and work that into place.

jcrawford

ok so I have figured this out and got it working. However I have to ask is there any way to make fnAddData add the item to the "beginning" of the table and not the end of the table?

The one issue I am having is the fact that when you add a new test user it is added to the "end" of the table and not the "beginning" is there anyway to make this add it to the beginning?

I am thinking if the admin is on page 1 they are not seeing the new entries. Hmmm however if they are on page 2 they wont see them either. So now the question is

can i add it to the beginning and have the table kick back to the first page?

jcrawford

Ok so I have tried everything that will make this work and still am not satisfied with the outcome :)

At-first I thought oh wait I will just default sort on the Facebook ID and that should make the new test user appear at the front of the list, this does not work. It does not work because the facebook id's are not incremental.

I wonder.. Since I don't know what page they will be on is there a way to make fnAddData add the data to the page they are currently on at the top? Maybe that wont work so is there a way I could add them to the top of the list and kick them to the first page and also highlight the rows a green color to show they were newly added?

Just trying to think through this so don't mind all of my posts lol

jcrawford

To solve this issue I have just used oTable.dataTable().fnClearTable(); followed by oTable.dataTable().fnAddData(data);

It is quite a bit slower doing it this way since I have to get the FULL LIST of users from FB in order to re-draw the table.

If there is a way to use fnAddData with just the "new" data and have it pushed to the TOP of the table please let me know because I would rather implement it that way to save some speed.

This is an admin application and this process with FB is slow as it is which is why i would like to speed it up any way I can without caching :)

jp_noronha

Hi,

i really think there isn't a way to do what you wish (insert on top of table), but i can suggest 2 ways to get something like that:
1- instead of fnAddData use fnAddDataAndDisplay, that way you allways visualize the new rows
2- use a rownum column and order desc the table with it. Use aaSortingFixed for that.

jcrawford

I thought about using the sorting on an ID but I do not have an ID column that is incremental so that will not work. As for the fnAddDataAndDisplay I am not seeing anything in the reference for that

http://datatables.net/ref#fnAddDataAndDisplay

jcrawford

I got this working, thanks :)

allan

Great to hear you got it working! For anyone else interested, to fill in some of the blanks:

> can i add it to the beginning and have the table kick back to the first page?

Basically no I'm afraid. DataTables ordering of rows is entirely done by sorting. So if the sorting would put your row at the top of the table, then that's great that would do it - you could manipulate the sorting to do this if you want, but you can't just say "insert at row x" without doing this manipulation.

> fnAddDataAndDisplay

Its a plug-in which is available here: http://datatables.net/plug-ins/api#fnAddDataAndDisplay

Allan

jcrawford

The issue I was having with the sorting was not able to be accomplished because I have no incremental columns or date columns as the data comes back from Facebook. To get around the issue of adding items to the table at the beginning I just adopted the order in which facebook returns the results. It just so happens for the time being that they return new test users at the front of the list so to get it working i just did the following:

[code]
oTable.fnClearTable();
for(x=0; x <= rows; x++) {
oTable.fnAddData( ['', ''+data[x].id+'', data[x].first_name, data[x].last_name, data[x].gender, data[x].locale], false );
}
oTable.fnDraw();
[/code]

If I could just clear the table and re-populate why was I trying any other way? That's a simple answer, I would rather get only the new data needed and push it into the table rather than fetching a whole list of test users. If I have 100 test users and I am adding 1 user it's MUCH faster to just get that one users data from Facebook than the data for 100 users.

While I got it working it does work a tad on the slow side but since it is an administration tool and it's due to Facebook not having nearly the processing power for the API boxes as they do their web servers. I discussed it with my boss and they were ok with this working implementation for now. One day if DataTables ever supports the injection of data at specific points we will refactor to use that method.

Why did it matter where the new test user was injected you might be asking... Simple we didn't want the user to be on page 4 of the results and have the user added to page 10. Another option was to force DataTables to the last page but that was just a bit clunky in my opinion.

Redrawing the table with the full new data works because it puts you back on page 1 by default where you can see the new user(s) created.

Allan: Just wanted to put a THANK YOU in here for creating this plugin. It has been useful to me over a couple different projects now. I am not sure if I have donated to you yet but even if I have this Thurday I will be making a donation. Thanks again your tool has saved me a lot of time.