Databases
StackOverflow2013
Postsdbo
POWhat jquery Grid supports a continuous stream of updates (json)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat jquery Grid supports a continuous stream of updates (json)
    primarykey
    data
    text
    <p><strong>Since this is a huge post here is a short summary</strong> (please read the hole post if you want to answer though):</p> <p>Implemented now:</p> <ul> <li>Website pulls lot of json (full dataset everytime ~30kb, already gzipped)</li> <li>Renders data to as html table client side</li> <li>Too much traffic</li> <li>Too long rendering times</li> </ul> <p><strong>Link to one of the sites: <a href="http://www.bet-mate.com/Views/BetfairCoupon.aspx" rel="nofollow">Sample</a></strong> </p> <p>We already implemented the partial data retrieval, what we need now is to find a solution that:</p> <ul> <li>Does only render the changes</li> <li>Flash updated cells</li> </ul> <p><strong>Question: What grid or other solutions exist to make this happen?</strong></p> <p><strong>UPDATE</strong>: The client wants to see all available data at once, <strong>no paging</strong>.</p> <hr> <p>Full description:</p> <p>In our application we need to display a certain number of rows (~300-1000) in a grid. Visitors can <strong>sort (client side)</strong> by clicking on the headers. Additionally each row contains multiple links that open an <strong>iframe using colorbox</strong>. </p> <p>The data</p> <ul> <li>is refreshed every 30 seconds (json from server)</li> <li>consists of multiple fields (strings, ints and decimals).</li> <li>Only the decimals are changing though, that means the links (colorbox) stay the same as well</li> <li>not all the data is displayed, some is used just for client side sorting</li> </ul> <p>Currently we are using a combination of <strong>jTemplates, tablesorter and colorbox</strong> to render the entire json dataset into an html table. The current flow is:</p> <ol> <li>Retreive data from server (full dataset)</li> <li>Render data to html using jTemplates</li> <li>Initialize colorbox for the table</li> <li>Initialize tablesorter for the table</li> <li>Start again from #1</li> </ol> <p>The solution above works, but there are some issues:</p> <ul> <li>Lots of duplicate data gets transferred. This adds up fairly quickly (>5GB/day)</li> <li>The rendering of the data takes quite a while (~300ms), its worse on mobiles</li> <li>Reinitializing the colorbox and tablesorter every time take quite a while as well (~400ms), also worse on mobiles</li> </ul> <p>So our goal is to <strong>just transfer the updated and new data</strong> via json. Every row has a simple unique key (int), so they can be identified easily.<br> Additionally we want to <strong>flash</strong> the container of the updated or newly inserted data, as a notification for the user that there have been changes.</p> <p>The flow we have in mind is:</p> <ol> <li>Get json data from server (<strong>full set</strong>)</li> <li>Render grid with sorting and initialize colorbox links</li> <li>Get json data from server (<strong>only updated values and new rows</strong>)</li> <li>Update the grid (<strong>only changed values and new rows</strong>) &lt;- also <strong>flash</strong> value containter after update</li> <li>Start again from #3</li> </ol> <p>So the grid we are looking for needs to support loading <strong>data as a hole</strong> and also loading <strong>just the updated values</strong>.</p> <p>The full data set would look like: </p> <pre><code>{ [ { "key":1, "StaticProperty":"value3", "PropertyOne":2.85 , "PropertyTwo":1.99 }, { "key":2, "StaticProperty":"value2", "PropertyOne":5.66, "PropertyTwo":7.36 }, { "key":3, "StaticProperty":"value3", "PropertyOne":1.78, "PropertyTwo":9.31 }, { "key":4, "StaticProperty":"value4", "PropertyOne":1.78, "PropertyTwo":9.31 }, { "key":5, "StaticProperty":"value5", "PropertyOne":1.78, "PropertyTwo":9.31 } ] }; </code></pre> <p>The update data set would look like (remeber it will only contain the changed values): </p> <pre><code>{ "updates" : [ { "key":1, "PropertyOne":4.88 }, { "key":2, "PropertyOne":2.77, "PropertyTwo":3.88 }, { "key":6, "StaticProperty":"value6", "PropertyOne":7.23, "PropertyTwo":8.42 } ], "deletes" : [ 4, 5 ] }; </code></pre> <p>As you can see the update can contain: </p> <ul> <li>partial updates (id #1)</li> <li>multiple updates per row (id #2)</li> <li>no updates for existing rows (id #3)</li> <li>ids of deleted rows as simple array (id #4, #5)</li> <li>new rows (id #6) </li> </ul> <p>What we need is a grid or other suggestions that qould make us able to handle <strong>all the mentioned operations</strong>.<br> We already have a way to make sure that the data is never corrupted (already handled on server and client side), so its really <em>just</em> about <strong>displaying the data and keeping the display up to date</strong>.</p> <p>All input is greatly appreciated.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USntziolis
    1. USntziolis
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat jquery Grid supports a continuous stream of updates (json)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhat jquery Grid supports a continuous stream of updates (json)
      1. USBenn
      1. VTFavorite
    3. VO
      singulars
      1. POWhat jquery Grid supports a continuous stream of updates (json)
      1. USChris
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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