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

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

10 голосов
/ 01 июня 2009

Я использую 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 для явного указания сортировщика, например , который предлагает этот вопрос , но я бы предпочел придерживаться динамического обнаружения, если возможно. 1011 *

Ответы [ 3 ]

9 голосов
/ 09 июня 2009

Первый вариант - присвоить столбцам с валютными значениями дополнительный класс "{'sorter': 'currency'}". Также убедитесь, что вы включаете метаданные плагина, которые поддерживает таблица сортировщика. Это включит параметры для каждого элемента и явным образом скажет 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>

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

Я подал ошибку и работаю над установкой патча.

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

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

return $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ 0-9.] / G), ""));

изменить на:

return $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ - 0-9.] / G), ""));

кейс:

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

  • текущий asc-заказ: $ 1, $ 3, $ - 3

  • ожидаемый asc заказ $ -3, $ 1, $ 3

кейс:

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

  • текущий asc-заказ: $ 1, $ 3, - $ 3

  • ожидаемый asc заказ $ -3, $ 1, $ 3

2 голосов
/ 13 сентября 2012

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

$('table').tablesorter({
  textExtraction: function(s) {
    var text = $(s).text();
    if (text.charAt(0) === '$') {
      return text.replace(/[^0-9-.]/g, '');
    } else {
      return text;
    }
  }
});
0 голосов
/ 03 марта 2014

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

Используйте этот класс в заголовке

и в столбце .

Как только это будет сделано, внесите изменения в код 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;
        }
    }
  });

...