Tablesorter忽略div中的一些数据

时间:2016-07-13 08:59:48

标签: javascript jquery tablesorter

我需要使用原始的tablesorter对表中的数字进行排序。

我的问题是:
在我的表中,我有一个TD我想解决,但在这个TD,我有一些DIV喜欢在这个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>

我们看到性别不起作用,因为DIV寄生虫排序! 我认为这只会忽略DIV工作排序

1 个答案:

答案 0 :(得分:2)

要忽略其他数据,您只需要在格式化程序中占第一行:

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

Updated Fiddle 的完整代码。

详细说明如下:

$(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>