Jquery таблица сортировки и сортировка валюты неправильно - PullRequest
2 голосов
/ 06 января 2020

Привет, я новичок в jquery и HTML Я пытаюсь отсортировать свою таблицу по валюте, но она не сортируется должным образом, если ее валюта, но если работает ее алфавитная сортировка, кто-нибудь может мне помочь или направить меня, я буду очень признателен заранее спасибо. Мой формат валюты имеет разделитель тысяч и десятичный разделитель. всякий раз, когда нажимается th, строка сортируется

function sortTable(f, n) {
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {
    var A = getVal(a);
    var B = getVal(b);

    if (A < B) {
      return -1 * f;
    }

    if (A > B) {
      return 1 * f;
    }

    return 0;
  });

  function getVal(elm) {
    var v = $(elm).children('td').eq(n).text().toUpperCase();
    if ($.isNumeric(v)) {
      v = parseInt(v, 10);
    }

    return v;
  }

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}

var f_sl = 1;
var f_nm = 1;

$("#sl").click(function() {
  f_sl *= -1;
  var n = $(this).prevAll().length;
  sortTable(f_sl, n);
});

$("#nm").click(function() {
  f_nm *= -1;
  var n = $(this).prevAll().length;
  sortTable(f_nm, n);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <tr>
      <th id="sl">VAL</th>
      <th id="nm">name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>RM 1,000.00</td>
      <td>AINA (W)</td>
    </tr>
    <tr>
      <td>RM 20,000.00</td>
      <td>HEYZA</td>
    </tr>
    <tr>
      <td>RM 5,000.15</td>
      <td>ANA</td>
    </tr>
    <tr>
      <td>RM 5,000.16</td>
      <td>ZED</td>
    </tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 06 января 2020

Вы можете использовать localeCompare вместе с опцией numeric

Вместо:

if (A < B) {
  return -1 * f;
}
if (A > B) {
  return 1 * f;
}
return 0;

Вы будете использовать:

if (f === 1) {
  return A.localeCompare(B, 'en', {numeric: true});
} else {
  return B.localeCompare(A, 'en', {numeric: true});
}

Кроме того, localeCompare может обрабатывать числовые значения как Строки , поэтому вам не нужно parseInt() в вашей функции getVal - единственное дополнительное изменение для обработки чисел использовать Regex для удаления всех разделителей , из ваших номеров при сортировке; это не повлияет на сортировку или на слова

function sortTable(f, n) {
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {
    var A = getVal(a).replace(/(\d),(?=\d)/g, '$1');
    var B = getVal(b).replace(/(\d),(?=\d)/g, '$1');

    if (f === 1) {
      return A.localeCompare(B, 'en-UK', {
        numeric: true
      });
    } else {
      return B.localeCompare(A, 'en-UK', {
        numeric: true
      });
    }
  });

  function getVal(elm) {
    return $(elm).children('td').eq(n).text().toUpperCase();
  }

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}

var f_sl = 1;
var f_nm = 1;

$("#sl").click(function() {
  f_sl *= -1;
  var n = $(this).prevAll().length;
  sortTable(f_sl, n);
});

$("#nm").click(function() {
  f_nm *= -1;
  var n = $(this).prevAll().length;
  sortTable(f_nm, n);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <tr>
      <th id="sl">VAL</th>
      <th id="nm">name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>RM 6,533.00</td>
      <td>AINA (W)</td>
    </tr>
    <tr>
      <td>RM 20.00</td>
      <td>HEYZA</td>
    </tr>
    <tr>
      <td>RM 1,174.00</td>
      <td>ANA</td>
    </tr>
    <tr>
      <td>RM 50.16</td>
      <td>ZED</td>
    </tr>
  </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...