Пользовательский парсер для JQuery Tablesorter

Question

Я использую jQuery Tablesorter и имею проблему с порядком, в котором синтаксические анализаторы применяются к столбцам таблицы. Я добавляю настраиваемый парсер для обработки валюты формы $ -3.33.

$.tablesorter.addParser({ 
    id: "fancyCurrency", 
    is: function(s) { 
     return /^\$[\-]?[0-9,\.]*$/.test(s); 
    }, 
    format: function(s) { 
     s = s.replace(/[$,]/g,''); 
     return $.tablesorter.formatFloat(s); 
    }, 
    type: "numeric" 
}); 

Проблема заключается в том, что встроенный анализатор валюты имеет приоритет над моим пользовательским парсером. Я мог бы поместить синтаксический анализатор в код tablesorter (перед парсером валюты), и он работает правильно, но это не очень удобно. Я не могу указать сортировщика вручную, используя что-то вроде:

headers: { 
    3: { sorter: "fancyNumber" }, 
    11: { sorter: "fancyCurrency" } 
} 

так как столбцы таблицы генерируются динамически с пользовательских входов. Я предполагаю, что одним из вариантов было бы задать сортировщик для использования в качестве класса css и использовать некоторый JQuery для явного указания сортировщика, например, this question, но я бы предпочел придерживаться динамического обнаружения, если это возможно.

Answer 1

Первый вариант - предоставить столбцам с валютными знаками дополнительный класс «{« сортировщик »:« валюта »}». Также убедитесь, что вы включаете метаданные плагинов, которые поддерживает tablesorter. Это приведет к настройке каждого элемента и явным образом расскажу о том, как сортировать.

<link rel="stylesheet" href="/css/jquery/tablesorter/green/style.css" /> 
<script src="/js/jquery-1.3.2.js"></script> 
<script src="/js/jquery.ui.core.js"></script> 
<script src="/js/jquery.metadata.js"></script> 
<script src="/js/jquery.tablesorter.js"></script> 

<script> 
    $(document).ready(function() 
    { 
    $("#table").tablesorter(); 
    } 
    ); 
    </script> 
</head> 
<table id="table" class="tablesorter"> 
<thead> 
    <tr> 
    <th class="{'sorter':'currency'}">Currency</th> 
    <th>Integer</th> 
    <th>String</th> 
    </tr> 
</thead> 
<tbody> 
<tr> 
    <td class="{'sorter':'currency'}">$3</td> 
    <td>3</td> 
    <td>three</td> 
</tr> 
<tr> 
    <td class="{'sorter':'currency'}">-$3</td> 
    <td>-3</td> 
    <td>negative three</td> 
</tr> 
<tr> 
    <td class="{'sorter':'currency'}">$1</td> 
    <td>1</td> 
    <td>one</td> 
</tr> 
</tbody> 
</table> 

Кроме того, в функции для форматирования валюты есть ошибка: она не обрабатывает отрицательные числа.

Я подал bug, и я работаю над посадкой патча.

Второй вариант - применить это исправление к вашей копии tablesorter. После того, как вы применили исправление, вам не нужно указывать сортировщик валют в th или td (в любом случае указание в td's over-kill).

Редактировать линии 724 из jquery.tablesorter.js:

возвращение $ .tablesorter.formatFloat (s.replace (новый RegExp (/ [^ 0-9]./Г), "")) ;

изменение:

возврата $ .tablesorter.formatFloat (s.replace (новый RegExp (/ [^ - 0-9.]/г),""));

случай:

• значения: $ -3, $ 1, $ 3

• текущий заказ по возрастанию: $ 1, $ 3, $ - 3

• ожидаемый порядок по возрастанию $ -3, $ 1, $ 3

случай:

• значения: - $ 3, $ 1, $ 3

• текущий заказ по возрастанию: $ 1, $ 3, - $ 3

• ожидаемый порядок по возрастанию $ -3, $ 1, $ 3

Answer 2

У меня была аналогичная проблема, и был найден параметр textExtraction, который рекомендуется, когда ваши ячейки содержат разметку. Тем не менее, он отлично работает, как формат форматирования!

$('table').tablesorter({ 
    textExtraction: function(s) { 
    var text = $(s).text(); 
    if (text.charAt(0) === '$') { 
     return text.replace(/[^0-9-.]/g, ''); 
    } else { 
     return text; 
    } 
    } 
}); 

Answer 3

Я использовал что-то вроде этого, и это сработало для меня.

Используйте этот класс в заголовке < th class = "{'sorter': 'digit'}"> и в столбце < td class = "{'sorter': 'digit'}">.

После того, как все сделано, внесите изменения в код javascript для получения всей валюты в виде цифр.

Его сделали, наслаждайтесь сортировкой !!!

Вот код:

ЗАГОЛОВОК:

<th style='width: 98px;' class="{'sorter':'digit'}"> 
      Amount 
    </th> 

КОЛОННЫ (тд):

<td align="left" style='width: 98px;' class="{'sorter':'digit'}"> 
      <%= Convert.ToDouble(a.AMOUNT ?? 0.0).ToString("C3") %> 
</td> 

JAVASCRIPT:

<script language="javascript" type="text/javascript"> 
    jQuery("#rewardtable").tablesorter({ 
    textExtraction: function (data) { 
     var text = $(data).text(); 
     if (text.toString().indexOf("-$") != -1) { 
      return ("-" + text.replace(new RegExp(/[^0-9.]/g), "")); 
     } 
     else if (text.toString().indexOf("$") != -1) { 
      return (text.replace(new RegExp(/[^-0-9.]/g), "")); 
     } 
     else { 
      return text; 
     } 
    } 
    });