Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I have had great success with DataTables (another jQuery plugin) with similar row numbers to what you are talking about. The speed loss you are seeing with javascript over what you have seen in java is it is actually rendering a DOM, which is a lot more work. The beauty of DataTables is you have the ability to source the data from a javascript array (essentially json) - so the sorting is done on the array (similar speed to java), and then only the part of the table the user needs to see is generated in the DOM.</p> <p>See these urls for examples:</p> <p><a href="http://datatables.net/examples/data_sources/js_array.html" rel="noreferrer">http://datatables.net/examples/data_sources/js_array.html</a></p> <p>or</p> <p><a href="http://datatables.net/examples/data_sources/ajax.html" rel="noreferrer">http://datatables.net/examples/data_sources/ajax.html</a></p> <p>I suggest using the latter. If its still not fast enough using a static json array, you will want to build a serverside script to take the load off javascript - great example with serverside code here:</p> <p><a href="http://datatables.net/examples/data_sources/server_side.html" rel="noreferrer">http://datatables.net/examples/data_sources/server_side.html</a></p> <h1>Edit: Infinite Scrolling</h1> <p>As discussed in the comments, the problem isn't the sort, but rather converting the HTML table to JS and back. This may help out by only loading rendering parts of the returned sort as the user views it; the server also provides the JS the same information as the table in JSON form. These two techniques eliminate the HTML-JS conversion and rendering problems, and thus greatly increase speed.</p> <p>HTML (this is all that has to be rendered initially before the JSON comes along - add as many th tags as you have columns):</p> <pre><code>&lt;table id="table_id"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Column 1&lt;/th&gt; &lt;th&gt;Column 2&lt;/th&gt; &lt;th&gt;etc&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>JQUERY:</p> <pre><code>$(document).ready(function() { $('#table_id').dataTable( { "bScrollInfinite": true, "bScrollCollapse": true, "sScrollY": "200px", "bProcessing": true, "sAjaxSource": 'array.txt' }); }); </code></pre> <p>array.txt contains:</p> <pre><code>{ "aaData": [ ["This will be in column 1","This in two","this in 3"], ["another row - column 1","another two","another 3"] ]} </code></pre>
 

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