jQuery - order html table rows dynamically, not using ui-sortable

Question

I'm trying to make a controllable html table list.

My List is like that:

<table>
    <tr id="selection_18">
        <td>
            <select id="colors_18">
                <option value="0">All</option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
    </tr>
    <tr id="selection_27">
        <td>
            <select id="colors_27">
                <option value="0">All</option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
    </tr>
    <tr id="selection_5">
        <td>
            <select id="colors_5">
                <option value="0">All</option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <button onclick="orderRows();" />
        </td>
    </tr>
</table>

Scenario is like that: user select all colors for example;

for first row he selected red, for second row he selected yellow, for third row he selected again red, ... and for ninetieth row he selected yellow.

And user wants to order all rows by color again to see for example which color is selected how many times.

What should i write in javascript function orderRows(). I can use jQuery but not want to use jQuery UI sortable. Because in some of my list, it has 400 rows. I think it would be not good solution.

it isn't important. I wanna make rows like red,red,red,yellow,yellow,yellow instead of red,yellow,red,red,yellow,red. Red can be first or last, it doesn't matter... — ibrahim
– ibrahim, Commented Apr 2, 2014 at 6:46
@AndroCoder you can do that with a simple code. You can use your existing table, no need to use external hashmap for rendering table. See my answer — Hüseyin BABAL
– Hüseyin BABAL, Commented Apr 2, 2014 at 7:15

Hüseyin BABAL · Accepted Answer · 2014-04-02 08:40:18Z

2

You can use this;

$("#order").on("click", function() {
    $('tr').sort(function(a, b){
      return $(a).find("option:selected").text() > $(b).find("option:selected").text();
    }).appendTo('table')    
});

$("#order").appendTo("table"); // this is for keep button place

Here is a working demo: jsfiddle

In demo, you can select colors, and click order button. After order, you can select your colors again and click order to shuffle.

Note: a, and b in function refers to specific two elements n and n+1 for each iteration. It means, it is comparing nth and (n+1)th element for each iteration. If n > n+1 element, n remains same, if not, n+1 moves place before n

edited Apr 2, 2014 at 8:40

answered Apr 2, 2014 at 7:14

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ibrahim Over a year ago

Hüseyin çok teşekkür :) yalnız sort olayının a sı b si nedir ben onu çözemedim. Bir dökümantasyon var mıdır

Hüseyin BABAL Over a year ago

Türk mü çıktın :) a sı b si şu demek. elinde 3 eleman var x, y, z. İlk iterasyonda a = x, b = y ikinci iterasyonda a = y , b = z oluyor. Yani hep n ile n+1 karşılaştırıp hangisi büyükse bir üste taşıyorsun. Just for incoming users see detail about a and b in my answer

Kyo · Accepted Answer · 2014-04-02 07:00:41Z

0

The function below will build a hashmap that groups the IDs of the select elements based on the color selected. You could use that hashmap to render the table however you would like to.

See the working demo at:

JSFiddle

JS:

function orderRows(){
    var colorArray = [ 'All', 'Red', 'Yellow' ];
    var colorMap = {};
    $('table select').each(function(){
        var color = colorArray[$(this).val()];
        if( colorMap[color] == undefined ){
            colorMap[color] = [];   
        }
        colorMap[color].push($(this).attr('id'));
    });
    $('div#display').html(JSON.stringify(colorMap));
}

HTML added (notice that the button was pulled out of the table):

<div>
    <button onclick="orderRows()">orderRows</button>
</div>
<div id="display">
</div>

JSON displayed example:

{"Red":["colors_18","colors_5"],"Yellow":["colors_27"]}

answered Apr 2, 2014 at 7:00

Kyo

9645 silver badges10 bronze badges

4 Comments

ibrahim Over a year ago

how can i render table by using this hashmap

Kyo Over a year ago

You have JSON that groups the IDs by the selected color. Iterate through the JSON and "order" the items. Not 100% clear on what you are trying to do when you said "order rows".

ibrahim Over a year ago

in the example default order of trs is: selection_18 > selection_27 > selection_5. User selects for colors_18 red, for colors_27 yellow, for colors_5 red. Then press button. I'm trying to see table like selection_18 > selection_5 > selection_27 .

Kyo Over a year ago

SO, you'd like to re-shuffle the table based on the selected color?

Collectives™ on Stack Overflow

jQuery - order html table rows dynamically, not using ui-sortable

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related