Home Sorting of numbers with special characters in different column values
Reply: 1

Sorting of numbers with special characters in different column values

Maria
1#
Maria Published in 2018-02-14 09:27:14Z

I have an HTML table and have eight columns with values separated by commas, decimal points etc.And some are percentage values and hour values.How to sort the values in descending order in the first click and in ascending order in the second click while clicking on corresponding column headers.

The code i tried to sort is as shown:

function getVal(elm, n) {
      var v = $(elm).find('td').eq(n).text().toUpperCase();
      var num = v.split(/ /)[0].replace(/[^\d]/g, '')
      num = parseFloat(num);
      if ($.isNumeric(num)) {
        v = parseInt(num, 10);
      }
      return v;
    }

    var f = 1;
    $(".table-sortable .column-head").find('span').click(function(event) {
      event.preventDefault();
      table = $(this).closest('table');
      th = $(this).parent();
      $(th).find('span').toggleClass('rotate');

      f *= -1;
      var n = th.prevAll().length;
      console.log(n);
      var rows = table.find('tbody  tr').get();
      rows.sort(function(a, b) {
        var A = getVal(a, n);
        var B = getVal(b, n);
        if (A < B) {
          return -1 * f;
        }
        if (A > B) {
          return 1 * f;
        }
        return 0;
      });
      $.each(rows, function(index, row) {
        table.children('tbody').append(row);
      });
    });

The HTML table:

<table class="table-sortable" id="myTable">
   <thead>
      <tr>
         <th scope="col" class="column-head"><span>abc1</span></th>
         <th scope="col" class="column-head"><span>abc2</span></th>
         <th scope="col" class="column-head"><span>abc3</span></th>
         <th scope="col" class="column-head"><span>abc4</span></th>
         <th scope="col" class="column-head"><span>abc5</span></th>
         <th scope="col" class="column-head"><span>abc6</span></th>
         <th scope="col" class="column-head"><span>abc7</span></th>
         <th scope="col" class="column-head"><span>abc8</span></th>
      </tr>
   </thead>
   <tbody class="table-body">
      <tr class="table-row">
         <td scope="row" class="column-fixed">BU001</td>
         <td class="column-values">18.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">46,13%</td>
         <td class="column-values">12.600.00€</td>
         <td class="column-values">77,00%</td>
         <td class="column-values">43.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
      <tr class="table-row">
        <td scope="row" class="column-fixed">AU003</td>
        <td class="column-values">21.240.00h</td>
        <td class="column-values">120h</td>
        <td class="column-values">1,13%</td>
        <td class="column-values">4.600.00€</td>
        <td class="column-values">12,00%</td>
        <td class="column-values">66.10%</td>
        <td class="column-values-end">1.82%</td>
      </tr>
     <tr class="table-row">
         <td class="column-fixed">AU309</td>
         <td class="column-values">2.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">26,13%</td>
         <td class="column-values">59.600.00€</td>
         <td class="column-values">3,00%</td>
         <td class="column-values">40.10%</td>
         <td class="column-values-end">12.82%</td>
      </tr>
      <tr class="table-row">
         <td class="column-fixed">DT907</td>
         <td class="column-values">12.240.00h</td>
         <td class="column-values">100h</td>
         <td class="column-values">6,13%</td>
         <td class="column-values">49.600.00€</td>
         <td class="column-values">90,00%</td>
         <td class="column-values">4.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
   </tbody>
</table>

scraaappy
2#
scraaappy Reply to 2018-02-14 13:02:33Z

don't forget jquery !

function getVal(elm, n) {
      var v = $(elm).find('td').eq(n).text().toUpperCase();
      //var num=(n!==0)? v.split(/ /)[0].replace(/[^\d]/g, ''):v;
      var num = v.match(/^\d/)?v.split(/ /)[0].replace(/[^\d]/g, ''):v;
      
      num = parseFloat(num);
      if ($.isNumeric(num)) {
        v = parseInt(num, 10);
      }
      return v;
    }

    var f = 1;
    $(".table-sortable .column-head").find('span').click(function(event) {
      event.preventDefault();
      table = $(this).closest('table');
      th = $(this).parent();
      $(th).find('span').toggleClass('rotate');

      f *= -1;
      var n = th.prevAll().length;
      console.log(n);
      var rows = table.find('tbody  tr').get();
      rows.sort(function(a, b) {
        var A = getVal(a, n);
        var B = getVal(b, n);
        if (A < B) {
          return -1 * f;
        }
        if (A > B) {
          return 1 * f;
        }
        return 0;
      });
      $.each(rows, function(index, row) {
        table.children('tbody').append(row);
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-sortable" id="myTable">
   <thead>
      <tr>
         <th scope="col" class="column-head"><span>abc1</span></th>
         <th scope="col" class="column-head"><span>abc2</span></th>
         <th scope="col" class="column-head"><span>abc3</span></th>
         <th scope="col" class="column-head"><span>abc4</span></th>
         <th scope="col" class="column-head"><span>abc5</span></th>
         <th scope="col" class="column-head"><span>abc6</span></th>
         <th scope="col" class="column-head"><span>abc7</span></th>
         <th scope="col" class="column-head"><span>abc8</span></th>
      </tr>
   </thead>
   <tbody class="table-body">
      <tr class="table-row">
         <td scope="row" class="column-fixed">AU201</td>
         <td class="column-values">18.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">46,13%</td>
         <td class="column-values">12.600.00€</td>
         <td class="column-values">77,00%</td>
         <td class="column-values">43.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
      <tr class="table-row">
        <td scope="row" class="column-fixed">BU004</td>
        <td class="column-values">21.240.00h</td>
        <td class="column-values">120h</td>
        <td class="column-values">1,13%</td>
        <td class="column-values">4.600.00€</td>
        <td class="column-values">12,00%</td>
        <td class="column-values">66.10%</td>
        <td class="column-values-end">1.82%</td>
      </tr>
     <tr class="table-row">
         <td class="column-fixed">AZ455</td>
         <td class="column-values">2.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">26,13%</td>
         <td class="column-values">59.600.00€</td>
         <td class="column-values">3,00%</td>
         <td class="column-values">40.10%</td>
         <td class="column-values-end">12.82%</td>
      </tr>
      <tr class="table-row">
         <td class="column-fixed">FE45</td>
         <td class="column-values">12.240.00h</td>
         <td class="column-values">100h</td>
         <td class="column-values">6,13%</td>
         <td class="column-values">49.600.00€</td>
         <td class="column-values">90,00%</td>
         <td class="column-values">4.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
   </tbody>
</table>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.304956 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO