Сортировка с помощью tinysort и атрибута данных - PullRequest
Новая
       12

Сортировка с помощью tinysort и атрибута данных

0 голосов
/ 24 марта 2012

Я пытаюсь отсортировать список на основе атрибутов данных с помощью tinysort .

Сначала список: 

<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>

А затем вызов tinysort: 

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

Должно быть, я что-то не так делаю, но не знаю, что ...

Ответы [ 2 ]

3 голосов
/ 24 марта 2012

Hiya рабочая демоверсия вашего кода: http://jsfiddle.net/wJzNE/15/

Обновлено: Реализация с использованием data: (option) здесь: http://jsfiddle.net/wJzNE/49/ & http://jsfiddle.net/wJzNE/52/ [code] $ ('ul # late-services> li'). Tsort ('span', {data: 'serviceid'});

Полезная ссылка: http://tinysort.sjeiti.com/

проблема была 1) замечено неправильное значение attr внутри и 2) внутри tsort no li не требуется, обратите внимание на разницу здесь: $('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'});​

Надеюсь, это поможет, ура

1 голос
/ 24 марта 2012

В вашем случае это должно работать: $ ('ul # late-services'). Tsort ('li', {attr: 'data-service-id'});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...