-1

I've developping on my website a way of sorting divs (.ligne) with various sorting options. sort by name, by date, by status, and by type. I have a jquery code that works well, I need to work it a little bit more to lighten it, but it works.

when clicking on each header "project", "year", "status", "type", my divs are sorted Asc or Dsc when clicking again.

what I'm trying to do now is to be abble when sorting the status divs, to have 2 conditions, first sort the status divs by status name and then sort it inside by project name.

in fact 2 criterias. I can't find a way of doin it.

here is a jsfiddle :

http://jsfiddle.net/C2heg/740/

can anybody help me ?

here is my html :

<div class="container-fluid titre">

  <div class="row">

  <div class="col-xs-3 text-right" >

  <div class="title" id="projet">PROJECT</div>

    <span id="nom_ASC" class="sort">&#8595;</span> <span id="nom_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title" id="annee">YEAR</div><span id="annee_ASC" class="sort">&#8595; </span> <span id="annee_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title" id="statut">STATUS</div><span id="statut_ASC" class="sort">&#8595;</span> <span id="statut_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title" id="type">TYPE</div><span id="type_ASC" class="sort">&#8595;</span> <span id="type_DSC" class="sort">&#8593;</span>

  </div>

  </div>

</div>

<div id="index" class="container-fluid">

  <div class="row ligne">

    <div class="col-xs-3 nom">130 HOUSING UNITS ROMAINVILLE</div>
    <div class="col-xs-3 annee">2010</div>  
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">LIVE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AGDE CAPE HOTEL</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEISURE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AIRBUS DELIVERY CENTER</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div>
    <div class="col-xs-3 type">WORK</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">COLLEGE DE FRANCE</div>
    <div class="col-xs-3 annee">2016</div> 
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEARN</div> 

  </div>
  <div class="row ligne">

    <div class="col-xs-3 nom">HACHETTE LIVRE HEADQUARTERS</div>
    <div class="col-xs-3 annee">2015</div> 
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">MOVE</div> 

  </div>



</div>

my CSS :

body {font-size:12px;line-height:16px;}
.row.ligne {border-top:1px solid black;cursor:pointer}
.content {display:none}
.title {position: absolute;cursor:pointer}
.titre {position:fixed;width:100%;background-color:white;z-index:100}
#index {padding-top:16px;}

and my Jquery :

var $divs = $("div.row.ligne");
var flag_ville = 1;
var flag_annee = 0;
var flag_statut = 0;
var flag_type = 0;
    $(".sort").hide();
    $("#nom_ASC").show();

/* VILLE */
$('#projet').on('click', function () {
if (flag_ville == 0) {
    $(".sort").hide();
    $("#nom_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".nom").text() > $(b).find(".nom").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_ville=1;
} else {
    $(".sort").hide();
    $("#nom_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".nom").text() > $(b).find(".nom").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_ville=0;
}
});

/* ANNEE */
$('#annee').on('click', function () {
if (flag_annee == 0) {
    $(".sort").hide();
    $("#annee_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".annee").text() > $(b).find(".annee").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_annee=1;
} else {
    $(".sort").hide();
    $("#annee_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".annee").text() > $(b).find(".annee").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_annee=0;
}
});

/* STATUS */
$('#statut').on('click', function () {
if (flag_statut == 0) {
    $(".sort").hide();
    $("#statut_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".statut").text() > $(b).find(".statut").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_statut=1;
} else {
    $(".sort").hide();
    $("#statut_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".statut").text() > $(b).find(".statut").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_statut=0;
}
});

/* TYPE */
$('#type').on('click', function () {
if (flag_type == 0) {
    $(".sort").hide();
    $("#type_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".type").text() > $(b).find(".type").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_type=1;
} else {
    $(".sort").hide();
    $("#type_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".type").text() > $(b).find(".type").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_type=0;
}
});






  $('body').on('click', '.ligne', function () {

    $(this).siblings().children(".content").slideUp(300);
    $(this).children(".content").slideToggle(300)

  });
mmdwc
  • 1,095
  • 6
  • 27
  • 53
  • Try to provide a working JsFiddle and it will be easier to help you :-) – Ronen Cypis Dec 01 '15 at 13:52
  • Possible duplicate of [Javascript, how do you sort an array on multiple columns?](http://stackoverflow.com/questions/2784230/javascript-how-do-you-sort-an-array-on-multiple-columns) – CoderPi Dec 01 '15 at 13:53
  • @RonenCypis you're fight I forgot to put the link here it is : http://jsfiddle.net/C2heg/740/ – mmdwc Dec 01 '15 at 13:54
  • @CodeiSir please look at my code before adding comment... I'm not using this method so it's not helping – mmdwc Dec 01 '15 at 13:55
  • 1
    from what I have seen you are using the sort on array with a sort-function – CoderPi Dec 01 '15 at 13:57
  • Why not you add filter on status by having a checkboxes at top for all possible statuses and then keep filtering as it is now :) – Furqan Aziz Dec 01 '15 at 14:14
  • @FurqanAziz, I think there's a misunderstand, I want to sort my divs when clicking on "type" for example, with 2 conditions, first type alphabetically, then project alphabetically... do you see what I mean ? – mmdwc Dec 01 '15 at 15:59
  • Do you want this only when sorted by status ? – Furqan Aziz Dec 01 '15 at 16:00
  • @FurqanAziz when sorted by status and type, for both of them, first by status or type, and then inside thr result by project name ASC – mmdwc Dec 01 '15 at 16:08
  • Okay I am posting answer below for both of these columns. – Furqan Aziz Dec 01 '15 at 16:10

1 Answers1

0

You are using simple div sort function and that is taking string [column value] comparison. You just need to append project name with status/type string comparison in appropriate way.

Here is the code, when you will sort by status or type, just after sorting by sorted column, it will auto sort in ascending order the project names internally [in groups for having same sorted column value]. If you want that user could sort by multiple columns then you can use this code as hint to extend this functionality.

/* STATUS */
$('#statut').on('click', function () {
    if (flag_statut == 0) {
        $(".sort").hide();
        $("#statut_ASC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b){
            return $(a).find(".statut").text() + $(a).find(".nom").text() > $(b).find(".statut").text() + $(b).find(".nom").text(); 
        });  
        $("#index").html(alphabeticallyOrderedDivs);
        flag_statut=1;
    } else {
        $(".sort").hide();
        $("#statut_DSC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
            return $(b).find(".statut").text() + $(a).find(".nom").text() > $(a).find(".statut").text() + $(b).find(".nom").text();
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_statut=0;
    }
});

/* TYPE */
$('#type').on('click', function () {
    if (flag_type == 0) {
        $(".sort").hide();
        $("#type_ASC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { 
            return $(a).find(".type").text() + $(a).find(".nom").text() > $(b).find(".type").text() + $(b).find(".nom").text(); 
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_type=1;
    } else {
        $(".sort").hide();
        $("#type_DSC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
            return $(b).find(".type").text() + $(a).find(".nom").text() > $(a).find(".type").text() + $(b).find(".nom").text(); 
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_type=0;
    }
});
Furqan Aziz
  • 1,094
  • 9
  • 18