javascript - Multiple Sort in List.js -

i'm using list.js display, search, filter, lot of contents in custom order.

my row made this

<div class="content-row">     <div class="order_id" style="display:none;">{{$item['order']}}</div>     <div class="order_category" style="display:none;">99999</div>     <div class="order_source" style="display:none;">99999</div>     <div class="order_page" style="display:none;">99999</div>     <div class="content_date" style="display:none;">2016-11-08 11:00:00</div>     <div class="dd-handle row-container"> row </div> </div> 

i'm trying order list of content multiple order: first order order_category, order_source, content_date, , order_page.

in firefox tried order list less important more important order , seems work, didn't work in chrome:

// options var options = {     valuenames: ['content_id', 'content_date', 'order_id', 'order_category', 'order_source', 'order_page'] }; // list html var listelement = $("#main_list"); // init list obj var listinstance = new list(listelement[0], options);  # ....  // works in firefox not in chrome!  // order page listinstance.sort('order_page', {     order: "asc" }); // order date listinstance.sort('content_date', {     order: "desc" }); // order list listinstance.sort('order_source', {     order: "asc" }); // order category listinstance.sort('order_category', {     order: "asc" });  # .... 

i know list.js doesn't support multiple sort read supports custom sort function. teach/show me how build custom sort function?

---

edit:

thanks @dekel build own method use list.js custom sort function 4 level of sort. works single sort type (asc or desc) specified list.js. report code:

/**  * sort list.js list 4 level of sort  *  * @param  {object} list        [list.js instance]  * @param  {string} first       [first field sort]  * @param  {string} second      [second field sort]  * @param  {string} third       [third field sort]  * @param  {string} fourth      [fourth field sort]  * @param  {string} sort        [sort type: asc || desc]  * @return {}                   []  */ var sortlist = function(list, first, second, third, fourth, sort) {      // if list not defined     if (utility.empty(list)) {         console.error("listmanager: can't sort, list undefined!");         // error no list!         return false;     }      // if first order id not defined     if (utility.empty(first)) {         // set default         first = "name";     }      // if second order id not defined     if (utility.empty(second)) {         // set default         second = "born";     }      // if third order id not defined     if (utility.empty(third)) {         // set default         third = "color";     }      // if fourth order id not defined     if (utility.empty(fourth)) {         // set default         fourth = "lastname";     }      // check order not defined     if (utility.empty(sort)) {         // set default order type desc          sort = "desc";     }      // make list order compatible list.js fields     first = "order_" + first;     second = "order_" + second;     third = "order_" + third;     fourth = "order_" + fourth;      console.log("list sort: ", first, second, third, fourth);      // call sort method of list.js     list.sort('', {order: sort,         sortfunction:             function(a, b) {                 // compare values field requested                 return _compareintegerstringdate(a, b, first)                     || _compareintegerstringdate(a, b, second)                     || _compareintegerstringdate(a, b, third)                     || _compareintegerstringdate(a, b, fourth);             }         }     ); }   /**  * compare list.js items value based on filed request.  * correct comparison between integers, strings, or dates.  *  * @param  {object}            [list.js item instance]  * @param  {object}  b           [list.js item instance]  * @param  {string}  field       [field compare]  * @return {integer}             [-x || 0 || +x]  */ var _compareintegerstringdate = function(a, b, field) {     if (utility.isint(a.values()[field])) {         // compare integer         return  b.values()[field] - a.values()[field];     }     else if(utility.isdate(a.values()[field], "yyyy-mm-dd hh:mm:ss")){         // compare date         return date.parse(b.values()[field]) - date.parse(a.values()[field]);     }     else {         // compare strings         return a.values()[field].localecompare(b.values()[field]);     } } 

but if try specify sort type (asc or desc) each value din't work. report code updated improvement:

/**  * sort list.js list 4 level of sort  *  * @param  {object} list        [list.js instance]  * @param  {string} first       [first field sort]  * @param  {string} second      [second field sort]  * @param  {string} third       [third field sort]  * @param  {string} fourth      [fourth field sort]  * @param  {string} firstorder  [order type: asc || desc]  * @param  {string} secondorder [order type: asc || desc]  * @param  {string} thirdorder  [order type: asc || desc]  * @param  {string} fourthorder [order type: asc || desc]  * @return {}              []  */ var sortlist = function(list,     first, second, third, fourth,     firstorder, secondorder, thirdorder, fourthorder, ) {     console.log("listmanager sort:", list, first, second, third, fourth);     // if list not defined     if (utility.empty(list)) {         console.error("listmanager: can't sort, list undefined!");         // error no list!         return false;     }      // if first order id not defined     if (utility.empty(first)) {         // set default         first = "name";     }      // if second order id not defined     if (utility.empty(second)) {         // set default         second = "born";     }      // if third order id not defined     if (utility.empty(third)) {         // set default         third = "color";     }      // if fourth order id not defined     if (utility.empty(fourth)) {         // set default         fourth = "lastname";     }      // check order if asc or desc     if (utility.empty(firstorder)) {         // set order         firstorder = "desc";     }      // check order if asc or desc     if (utility.empty(secondorder)) {         // set order         secondorder = "desc";     }      // check order if asc or desc     if (utility.empty(thirdorder)) {         // set order         thirdorder = "desc";     }      // check order if asc or desc     if (utility.empty(fourthorder)) {         // set order         fourthorder = "desc";     }      // make list compatible     first = "order_" + first;     second = "order_" + second;     third = "order_" + third;     fourth = "order_" + fourth;     // make ascending descending compatible     firstasc = firstorder === "asc" ? true : false;     secondasc = secondorder === "asc" ? true : false;     thirdasc = thirdorder === "asc" ? true : false;     fourthasc = fourthorder === "asc" ? true : false;      console.log("list sort: ", first, second, third, fourth);     console.log("list asc: ", firstasc, secondasc, thirdasc, fourthasc);      // call sort method of list.js     list.sort('', {order: '',         sortfunction:             function(a, b) {                 // compare values field requested                 return _compareintegerstringdate(a, b, first, firstasc)                     || _compareintegerstringdate(a, b, second, secondasc)                     || _compareintegerstringdate(a, b, third, thirdasc)                     || _compareintegerstringdate(a, b, fourth, fourthasc);             }         }     ); }  /**  * compare list.js items value based on filed request.  * correct comparison between integers, strings, or dates.  *  * @param  {object}            [list.js item instance]  * @param  {object}  b           [list.js item instance]  * @param  {string}  field       [field compare]  * @param  {boolean} isascending [determinate if ascending order]  * @return {integer}             [-x || 0 || +x]  */ var _compareintegerstringdate = function(a, b, field, isascending) {     console.log(field + " isascending " + isascending);     if (utility.isint(a.values()[field])) {         // compare integer         return isascending             ? a.values()[field] - b.values()[field]             : b.values()[field] - a.values()[field];     }     else if(utility.isdate(a.values()[field], "yyyy-mm-dd hh:mm:ss")){         // compare date         return isascending             ? date.parse(a.values()[field]) - date.parse(b.values()[field])             : date.parse(b.values()[field]) - date.parse(a.values()[field]);     }     else {         // compare strings         return isascending             ? b.values()[field].localecompare(a.values()[field])             : a.values()[field].localecompare(b.values()[field]);     } } 

any suggestions fix that?

thank much!

list.js support writing own sort function:

list.sort('name', {sortfunction: function() { ... }) 

basically sort function gets 2 parameters - 2 elements list, , compare them. if first element should first, function should return -1. if second item should first, function should return 1. if equal, function should return 0.

the list.js library gives value-names inside a.values(), can use them comparison.

in following example created list names , years , sort function sort name (asc) , year (desc).

var options = {    valuenames: [ 'name', 'born' ]  };    var userslist = new list('users', options);  userslist.sort('', {order: "desc", sortfunction:                       function(a, b) {                        if (math.abs(b.values().name.localecompare(a.values().name)) == 1) {                          return b.values().name.localecompare(a.values().name)                        } else {                          return a.values().born - b.values().born;                        }                      }                     })

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script>    <div id="users">      <input class="search" placeholder="search" />    <button class="sort" data-sort="name">      sort    </button>      <ul class="list">      <li>        <h3 class="name">aaa</h3>        <p class="born">1986</p>      </li>      <li>        <h3 class="name">aab</h3>        <p class="born">1985</p>      </li>      <li>        <h3 class="name">aac</h3>        <p class="born">1986</p>      </li>      <li>        <h3 class="name">aab</h3>        <p class="born">1983</p>      </li>    </ul>    </div>