Home/ Questions/Q 7680373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T18:06:02+00:00

I am trying to sort a list based on data attributes with tinysort .

  • 0

I am trying to sort a list based on data attributes with tinysort.

First the list:

<ul id="late-services" class="list">
<li data-service-id="23" data-criticality="1000">
    <span>Service 23</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>
<li data-service-id="22" data-criticality="2000">
    <span>Service 22</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>
<li data-service-id="24" data-criticality="500">
    <span>Service 24</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>               
</ul>

And then the call to tinysort:

$('ul#late-services>li').tsort('li', {data:'serviceId'});

I must be doing something wrong but don’t know what…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hiya working demo of your code: http://jsfiddle.net/wJzNE/15/

    Updated: Implementation using data: (option) here: http://jsfiddle.net/wJzNE/49/
    & http://jsfiddle.net/wJzNE/52/ [code]$(‘ul#late-services>li’).tsort(‘span’,{data:’serviceid’});​

    Helpful link: http://tinysort.sjeiti.com/

    issue was 1) noticed wrong attr value inside and 2) inside tsort no li is required notice the difference here: $('ul#late-services>li').**tsort({attr:'data-service-id'})**;​

    HTML

    <!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://tinysort.sjeiti.com/scripts/jquery.tinysort.js"></script>


  </head>
  <body>
<ul id="late-services" class="list">
<li data-service-id="23" data-criticality="1000">
    <span>Service 23</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>
<li data-service-id="22" data-criticality="2000">
    <span>Service 22</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>
<li data-service-id="24" data-criticality="500">
    <span>Service 24</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>               
</ul>


    </body>
</html>
​

    JqueryCode

    $('ul#late-services>li').tsort({attr:'data-service-id'});​

    Hope this helps, cheers

    • 0