Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is how to do it. I used this <a href="https://stackoverflow.com/questions/552888/sort-div-elements-using-jquery">SO question</a> as a reference.</p> <p>I tested this code and it works properly for your example:</p> <pre><code>$(document).ready(function() { var categories = new Array(); var content = new Array(); //Get Divs $('#input &gt; [category]').each(function(i) { //Add to local array categories[i] = $(this).attr('category'); content[i] = $(this).html(); }); $('#input').empty(); //Sort Divs var category_sort_order = ['any', 'product', 'download']; for(i = 0; i &lt; category_sort_order.length; i++) { //Grab all divs in this category and add them back to the form for(j = 0; j &lt; categories.length; j++) { if(categories[j] == category_sort_order[i]) { $('#input').append('&lt;div category="' + category_sort_order[i] + '"&gt;' + content[j] + '&lt;/div&gt;'); } }; } }); </code></pre> <p><strong>How it works</strong></p> <p>First of all, this code requires the JQuery library. If you're not currently using it, I highly recommend it.</p> <p>The code starts by getting all the child divs of the input div that contain a category attribute. Then it saves their html content and their category to two separate arrays (but in the same location.</p> <p>Next it clears out all the divs under the input div.</p> <p>Finally, it goes through your categories in the order you specify in the array and appends the matching child divs in the correct order.</p> <p><strong>The For loop section</strong></p> <p>@eyelidlessness does a good job of explaining for loops, but I'll also take a whack at it. in the context of this code.</p> <p>The first line:</p> <pre><code>for(i = 0; i &lt; category_sort_order.length; i++) { </code></pre> <p>Means that the code which follows (everything within the curly brackets { code }) will be repeated a number of times. Though the format looks archaic (and sorta is) it says:</p> <ol> <li>Create a number variable called i and set it equal to zero</li> <li>If that variable is less than the number of items in the category_sort_order array, then do whats in the brackets</li> <li>When the brackets finish, add one to the variable i (i++ means add one)</li> <li>Then it repeats step two and three until i is finally bigger than the number of categories in that array.</li> </ol> <p>A.K.A whatever is in the brackets will be run once for every category.</p> <p>Moving on... for each category, another loop is called. This one:</p> <pre><code>for(j = 0; j &lt; categories.length; j++) { </code></pre> <p>loops through all of the categories of the divs that we just deleted from the screen.</p> <p>Within this loop, the if statement checks if any of the divs from the screen match the current category. If so, they are appending, if not the loop continues searching till it goes through every div.</p>
    singulars
    1. This table or related slice is empty.
    1. POSorting Divs in jQuery by Custom Sort Order
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USMichael La Voie
    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. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you for your help. I'm a javascript novice and while I understand the first part of your code, I'm baffled by the 2nd part. What are the i=0 and j=0 lines for? I see these a lot and cannot understand. Thanks again.
      singulars
      1. PO
      1. USlightyrs
    2. COhnovic, those are iterator variables. They correspond to the numerical keys of the `Array` they iterate. A `for` loop (typically) takes as its first statement an initial key, its second statement a final key, and its final statement an instruction to move from the initial key to the final key (typically `i++` or `i--`).
      singulars
      1. PO
      1. USeyelidlessness
    3. COThis has the benefit of not manipulating the dom more than it has to, but it does use inline html which is a little yucky, especially when things start to change.
      singulars
      1. PO
      1. USAlex Sexton
 

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