A Unique Scenario Needing Assistance
A Unique Scenario Needing Assistance
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?
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?
This discussion has been closed.
Replies
[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
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?
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
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 :)
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.
http://datatables.net/ref#fnAddDataAndDisplay
> 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
[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.