StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Thanks for posting the extra source code details. I think I may have found the issue...</p> <p>In the description of the <code>fnReloadAjax</code> plugin, <a href="http://www.sprymedia.co.uk/" rel="nofollow">Allan Jardine</a> added the following note:</p> <blockquote> <p>Note: To reload data when using server-side processing, just use the built-in API function <a href="http://datatables.net/api#fnDraw" rel="nofollow">fnDraw</a> rather than this plug-in.</p> </blockquote> <p>Now, while I realize that you've confirmed that data being requested from <code>/datable1-url</code> and <code>/datable2-url</code> is correct and that the first data table is even reloading properly when using <code>fnReloadAjax</code>; however, in light of Allan's note, and for lack of a better answer because of the mysterious nature of the problem, I'd say that it's likely that the problem with your current implementation is indeed due to <code>fnReloadAjax</code> not being the appropriate solution for the way you have your tables configured.</p> <p>I also realize, though, that simply changing <code>fnReloadAjax</code> to fnDraw, as the tables are set up right now, is not going to solve your problem...time to get tricky...</p> <p>Here's my solution:</p> <p>Start by adding these two lines to the top of your script:</p> <pre><code>var isInitialLoadTable1 = true; var isInitialLoadTable2 = true; </code></pre> <p>Next, in each of the dataTable settings variables, add the following additional callback after the <code>fnServerParams</code> callback:</p> <pre><code>"fnInitComplete": function( oSettings, json ) { isInitialLoadTable1 = false; } </code></pre> <p>Make sure to change <code>isInitialLoadTable1</code> to <code>initialLoadTable2</code> in the second table [and don't forget the comma after the end brace for <code>fnServerParams</code> :-) ]</p> <p>Now for the trickiness... in the <code>fnServerData</code> callback change the <code>url</code> setting of the <code>$.ajax</code> call like so:</p> <pre><code>"url": (isInitialLoadTable1 ? sSource : '/datable1-url'), </code></pre> <p>Again, be sure to change <em>both</em> of the 1's to 2's in this statement for the second dataTable</p> <p>Finally, change your click event to the following:</p> <pre><code>$("#rankings").on("click", "a.add", function (e) { dataTableObjects.searchResultsTable.fnDraw(); dataTableObjects.currentPortfolioTable.fnDraw(); e.preventDefault(); }); </code></pre> <p>Now, I haven't tested this, but the real test lies with your code and your data.</p> <p>Hopefully, this solves the problem.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload