CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
MitchCool1
MitchCool1

Reputation: 329

Sorting HTML divs

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>

Upvotes: 0

Views: 125

Answers (2)

Allen May
Allen May

Reputation: 333

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

Upvotes: 0

dfsq
dfsq

Reputation: 193291

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

Upvotes: 2

Related Questions