Sorting HTML divs

Question

I have a database table with a list of images. Each image also has data attached, like a name and value. Using this table, I create HTML code with PHP to make a grid on the screen, each with an image/name/value from the table.

This is my PHP that generates the HTML:

//Makes a div for each item in table
Echo "<li id=div" . $i . ">";
//Content for single grid block
Echo '<center><h3 id="credits' . $i . '">' . $credit_value . " credits" .  '</h3></center>';
Echo "<img id='item" . $i ."' src= '$new_link' title='$row[Item_Name]' class='clickableImage' alt='$just_name' data-creditvalue='" . $credit_value . "' data-imagenumber='" . $i . "'border=0 style='position: center; top: 0; left: 0;'/>";
Echo '<center><h3 id="quality">' . $quality . '</h3></center>';
Echo '</li>';

This makes each div named "div1", "div2" etc. In the //content section, printed with the image is data-imageName=$imageName and data-imageValue=$value, though I should be able to attach those to the divs holding the content as well.

What I want to do is add buttons at the top of my page which will sort the image grid by categories. It is currently loaded in order of the items in the database table, but for example, I would have a button that could be clicked after the grid is loaded, which changes the orders of all the divs, so they are in alphabetical order, or lowest->highest valule.

How can I do this?

EDIT: Here is an example of the html generated by the above code.

<li id="div2">
    <center>
        <h3 id="credits2">108 credits</h3>
    </center>
    <div style="position: relative; left: 0; top: 0;">
        <img id="item2" src="http://steamcommunity-a.akamaihd.net/economy/image/fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz56P7fiDz9-TQXJVfdSXfgF9gT5DBg-4cBrQJnv8eMDKgnutIGTZeEpYt8dH5LTU_ePNwj-uE9s1aZVepTb9Czu33zpJC5UDL2Z8FjG/155fx118f" title="AK-47 | Blue Laminate (Minimal Wear)" class="clickableImage" alt="AK-47 | Blue Laminate " data-creditvalue="108" data-imagenumber="2" border="0" style="position: center; top: 0; left: 0;">
        <img src="images/tick.png" id="tick2" class="hidden" style="position: absolute; top: 0px; left: 70%;">
    </div>
    <center>
        <h3 id="quality">Minimal Wear</h3>
    </center>
</li>

@dfsq I just added the code that generates the content of the grid blocks. — MitchCool1, Jun 14 '15 at 12:37
Ok, however it's better to add HTML code, since the question is not about PHP. — dfsq, Jun 14 '15 at 12:38
@dfsq I know, though, that is just HTML code being echoed by PHP, with some PHP variables. There wouldn't be anything to look at if I got rid of all PHP variables. — MitchCool1, Jun 14 '15 at 12:40
I'm saying the you need to post generated HTML code, the result of PHP script execution. Normally you take it from page source ot developer tools. Otherwise those trying to help you will need to construct HTML themself just to test the solution. — dfsq, Jun 14 '15 at 12:42

score 2 · Accepted Answer · answered Jun 14 '15 at 13:05

2

It's pretty easy to sort nodes with jQuery (and in pure JS actually too). You need to use sort methods which delegates to Array.prototype.sort, just provide custom comparator functions.

In your case you want to be able to sort by string title as well as by number, so I would create two separate functions and use them depending on what button was clicked:

<button onclick="sort('title', 'string')">Sort by name</button>
<button onclick="sort('data-creditvalue', 'number')">Sort by value</button>

and sort function will be

var comparators = {
    string: function(a, b) {
        return a.localeCompare(b);
    },
    number: function(a, b) {
        return Number(a) - Number(b);
    }
};

function sort(attr, type) {

    var $container = $('ul'),
        $li = $container.find('li');

    $li.sort(function(a, b) {
        var aVal = $(a).find('img').attr(attr),
            bVal = $(b).find('img').attr(attr);
            console.log(aVal)
        return comparators[type](aVal, bVal);
    }).appendTo($container);
}

Demo: http://plnkr.co/edit/lLJ0AWlLvwDeInBEIYCb?p=info

answered Jun 14 '15 at 13:05

dfsq

191,768
25
236
258

Okay thanks. Some problems though. When sorting by value, it's still doing it alphabetically. ("208 credits before "81 credits") instead of by value. If I just used the numbers (208) with out the "credits", would it work by value? Secondly, I tried to use your code on my page, and it all went crazy. It added the grid, but not formatted properly, in about 10 places on the page. Is this because it is doing it to all divs labeled
- ....
?
– MitchCool1 Jun 14 '15 at 13:25
In my example I use `number` comparator that expects values of attributes to be "208". You need to provide proper selector `$container = $('ul'),`, maybe to select only one specific UL, or table. – dfsq Jun 14 '15 at 13:43
To use a div
– MitchCool1 Jun 14 '15 at 13:52
@stdob That is perfect. I hope I can get it to work on my site. I'm trying now but I'm getting the same problem as before, it's changing everything on the page to include the grid. If I wanted it to change only certain divs, would I id my div
– MitchCool1 Jun 14 '15 at 14:15
Thanks, that fixed that problem. Now, when I'm sorting them, it sorts them seemingly randomly.. I've tried to put together what my code looks like here: http://jsfiddle.net/ezYJh/293/ (This also is behaving a bit differently to my actual site, as my sites buttons change from DESC to ASC, this JSFiddle doesn't) Can you see why it is sorting it like that? Edit: had wrong link sorry. – MitchCool1 Jun 14 '15 at 14:30
1) You need use `data-title` attribute to sort by name; 2) Value of attribute do not correspond visible text. For example `data-creditvalue="249"` but text is `108 credits` – stdob-- Jun 14 '15 at 14:35
@stdob Would you be able to edit my Fiddle to show where I'm supposed to use the data-title? It doesn't fix it using that in the – MitchCool1 Jun 14 '15 at 14:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80522/discussion-between-mitchcool1-and-stdob). – MitchCool1 Jun 14 '15 at 14:54
@MitchCool1 Did you figure it out? Here is fixed fiddle: http://jsfiddle.net/dfsq/ezYJh/304/ – dfsq Jun 14 '15 at 16:04
@dfsq I did get more help from stdob, that helps as well though, thanks. – MitchCool1 Jun 14 '15 at 16:06

score 0 · Answer 2 · edited May 23 '17 at 12:14

Depends where you want to have the sorting done. Do you want the sorting done on the server or on the client?

SERVER SIDE: Your column headers would need to link back to the server and pass a SQL parameter to update your SQL query. This wouldn't be the prefered way. It would refresh the page every time you sorted.

CLIENT SIDE: You could use a jQuery plugin, like DataTable, to do the sorting.

CLIENT SIDE (Ajax): Here is some good detail already published

Sorting HTML divs

2 Answers2