Reload data from HTML
Reload data from HTML
Hi,
I have been looking for a straightforward way to do this and not had much luck going through the various posts.
Basically I have an empty table that I initialise with .DataTable() . A jQuery call is made to a server which will then return the contents of a table (so the thead to tbody tags and all children) back to the page in HTML.
I have seen that you can use arrays, use JSON etc etc but I have to work with plain old HTML. From what I can see in previous posts version 1.10 is supposed to have an invalidate method that will reload the rows from the DOM. However I have not been able to find it?
Can someone give me a pointer on this or at least tell me how I can accomplish the task above?
Thanks.
This question has an accepted answers - jump to answer
Answers
You mean
rows().invalidate()
?Hi jr42,
I cannot find that method, the only one that appears is
.rows()._fnInvalidateRow();
Ok it seems there is something wrong with my version of 1.10 so I have re-downloaded the script. The invalidate method does not show up in intellisense but I can at least find it now.
However the function does not appear to do anything.
This is what I am doing.
Nothing happens. The table appears but the datatable functionality does not work. If I enter a static table on the page and assign datatable to this, it does.
The
row().invalidate()
method will get the information from the DOM (or data source) about existing rows, as explained in its documentation. It will not add or delete new and old rows, which it sounds like you are using.You need to use the API to add and remove rows once a DataTable has been initialised - see this FAQ.
Allan
I still cannot get this to work. I am returning the tr data as mentioned in the FAQ (though would love to see an example!) alerting it out so I can definately see that the data is valid but as soon as the the script hits the line to add the rows it crashes. Doesnt seem to matter where I put this line the script just stops working.
Has anyone ever got this working? If so please provide an example.
`
var table = $('#search-table');
function runSearch() {
var searchTxt = $('#SearchString').val();
var searchbox = $('#search-text');
var tablerows = $('#search-table-rows');
`
<table id="search-table" class="results-table" style="display: none;">
<thead>
<tr>
<th>Order No</th>
<th>Budget Year</th>
<th>Run</th>
<th>Description</th>
<th>Client</th>
</tr>
</thead>
<tbody id="search-table-rows">
</tbody>
</table>
My suggestion is to not return HTML but data and use the DataTables API, as mentioned by @allan, to add/remove rows to your table.
Hi Gordon,
Unfortuantely I cannot use anything other than the data coming from the server, there is no other option for me unless I write a parser to convert the data and then re-read it but this seems exceedingly overkill as opposed to using the HTML being returned.
I really need to see an example of this working because I am beginning to think the lack of any examples on the FAQ or in any other answers I've searched for where the data is using a TR tag element kind of makes me think the functionality is just not there.
The FAQ for rows.add() specifically states it can accept a TR tag element so I cannot understand why there is no example of this shown or why it doesnt seem to work.
Even if I ignore the data coming from my ajax request and set this value using a simple one line string of "<tr><td>this is my cell</td></tr>", once I add this to the DOM and then call the DataTable function it sounds like your implying you cannot then make subsequent calls to DataTable?
If thats the case how can this ever work? I thought the point of the rows.add() and other API calls was that once you had initialised the data table on document ready by doing this:
var table = $('#search-table');
table.DataTable({
paging: false,
searching: false,
ordering: true,
autoWidth: false,
info: false,
stateSave: false,
responsive: false
});
You could then manipulate the table later, even if there are no rows in the table when the DOM loads initially.
This is why I call DataTable in document ready, so that once I make my ajax call I can then simply update the DOM and then call the api line like so:
table.rows.add(myajaxdata).draw();
So that my datatable updates itself and I should then be able to rinse and repeat with every subsequent ajax call.
If thats not actually possible, or as I understand from your post you can only call DataTable once and only after a single DOM manipulation, then this really needs to be made clear in the FAQ as it seems pretty misleading to suggest datatables can work dynamically otherwise when working with HTML.
I was referring to this line of code
If tablerows references the DOM tbody of your table, and you are replacing it with the returned data, then as far as I know that is a no-no with DataTables. Given only snippets of code and not a working example, as per forum rules, makes it difficult to fully understand and provide assistance.
In the code you have provided, can you please make the following changes.
Hi Gordon,
I did not post the remaining code, since I did not beleive it would provide anything extra to the puzzle but your quite right so here it is for clarity. I have also made the amendments as you suggest however I started to get the undefined paramter error for some reason. I then added the columndefs default.
My result now however is that I get a bunch of empty rows and no data at all.
This is the javascript:
This is the html master file
And this is an example of the output from the server:
Can you give the specific error message please.
Can you also link to the page showing the issue so we can debug it directly which will make it much easier to provide assistance.
Also what exactly is
data
in yourrows.add()
call? It should be an array (since it is plural) and contain either objects, arrays or table nodes.Allan
Hi Allan,
The error message I received was:
DataTables warning: table id=search-table - Requested unknown parameter '1' for row 0. For more information about this error, please see http://datatables.net/tn/4
I fixed this with in the initialisation for the datatable:
The
data
object is the returned html as belowp.s. thanks for the guide, I did wonder why the code option on the editor wasnt working!
So
data
is a string? If so, that is what it isn't working. You could try:Allan
Hi Allan,
Yes thats correct, the data is a string of HTML. I thought that was acceptable according to this https://datatables.net/reference/api/rows.add()
I have made the change you recommend however this seems to just crash the script on the line that was updated.
If data should not be a string, how are you able to use a tr element as per the API doc?
By
tr
element the documentation means a node, not a string. I should perhaps clarify that.As I suggest above - use
$(data)
which will let jQuery render the string into HTML.If that isn't working for you, I'd be happy to look at the page if you can give me a link to it.
Allan
Hi Allan,
Well that at least explains why I could never get it to work
Anyway I did try your suggestion but for some reason using
$(data)
just kept crashing the script so instead I did the following:This works to a certain degree. I now get rows with data and I am also getting sort functionality. However I am also getting a number of blank rows at the top of the table equal (bar one) to the number of rows in the data (so 2 blank rows to every 3 of data, or 10 blanks for every 11 of data).
As for the page I am unable to provide a link because it is hosted on an intranet. However I will try to mock up a page and host it somewhere if that helps.
Here is a little example showing it working: http://live.datatables.net/codewude/1/edit .
If you are able to modify that to show the issue I can take a look into it.
Allan
Hi Allan,
I have sussed it! It looks like the data coming back from the server requires more sanitization. The empty rows are being caused by tab/newline/space characters between the tr elements for each row. This then results in a blank row between each data row.
I have done the following to sanatize the data from the server and now everything is hunky dorey
Many thanks to you and gordon for all your help on this! I hope it helps others who fell into the same misunderstanding with the FAQ at least.
Thanks for posting back - good to hear you are up and running with it now.
Allan