Tablesorter ignore some data in div

Question

i need to sort number in table with the original tablesorter.

My problem is :
In my table, i've a TD i would like to sort out, but in this TD, i've some DIV like in this jsfiddle :

http://jsfiddle.net/2mzj57jt/1/

$(function() {
  $.tablesorter.addParser({
    id: 'colpap',
    is: function(s) {
      return false;
    },
    format: function(s) {
      var number = parseFloat(s.replace(/\s+/g, ''));
      return isNaN(number) ? s : number;
    },
    type: 'numeric'
  });
  $('table').tablesorter({
    theme: 'blue',
    headers: {
      0: {
        sorter: 'colpap'
      }
    }
  });
});

<table class="tablesorter">
  <thead>
    <tr>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>256 236
        <div class="info" style="background-color: rgb(166, 194, 255);">6 236</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">5 000</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">11 253</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">233 747</div>
      </td>
    </tr>
    <tr>
      <td>11 256 232
        <div class="info" style="background-color: rgb(166, 194, 255);">4 253 620</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
      </td>
    </tr>
    <tr>
      <td>23 056
        <div class="info" style="background-color: rgb(166, 194, 255);">20 000</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">3 056</div>
      </td>
    </tr>
    <tr>
      <td>11 536
        <div class="info" style="background-color: rgb(166, 194, 255);">1 536</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">2 500</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">7 500</div>
      </td>
    </tr>
    <tr>
      <td>1 023 585
        <div class="info" style="background-color: rgb(166, 194, 255);">1 023 585</div>
      </td>
    </tr>
  </tbody>
</table>

We see gender does not work because DIV parasite sorting ! I think that would just ignore the DIV worked sorting

Answer 1

To ignore other data you need to take only first line in your formatter:

var number = parseFloat(s.split('\n')[0].replace(/\s+/g, ''));

Full code at Updated Fiddle.

Detailed below:

$(function() {
  $.tablesorter.addParser({
    id: 'colpap',
    is: function(s) {
      return false;
    },
    format: function(s) {
      var number = parseFloat(s.split('\n')[0].replace(/\s+/g, ''));
      return isNaN(number) ? s : number;
    },
    type: 'numeric'
  });
  $('table').tablesorter({
    theme: 'blue',
    headers: {
      0: {
        sorter: 'colpap'
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet"/>

<table class="tablesorter">
  <thead>
    <tr>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>256 236
        <div class="info" style="background-color: rgb(166, 194, 255);">6 236</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">5 000</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">11 253</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">233 747</div>
      </td>
    </tr>
    <tr>
      <td>11 256 232
        <div class="info" style="background-color: rgb(166, 194, 255);">4 253 620</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
      </td>
    </tr>
    <tr>
      <td>23 056
        <div class="info" style="background-color: rgb(166, 194, 255);">20 000</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">3 056</div>
      </td>
    </tr>
    <tr>
      <td>11 536
        <div class="info" style="background-color: rgb(166, 194, 255);">1 536</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">2 500</div>
        <div class="info" style="background-color: rgb(166, 194, 255);">7 500</div>
      </td>
    </tr>
    <tr>
      <td>1 023 585
        <div class="info" style="background-color: rgb(166, 194, 255);">1 023 585</div>
      </td>
    </tr>
  </tbody>
</table>