Question

我正在使用jQuery DataTables插件和标题数字自定义排序插件。排序工作ALMOST。我有一个带有td标签的表，其中包含一个隐藏的span元素，如此...

<td><span title="5">DATA HERE</span></td>
<td><span title="4">DATA HERE</span></td>
<td><span title="2">DATA HERE</span></td>
<td><span title="17">DATA HERE</span></td>
<td><span title="10">DATA HERE</span></td>

在这些列上使用隐藏的标题数字排序，在DESC顺序中，我按以下顺序获取标题的单元格

5,4,2,17,10

我希望它排序为

17,10,5,4,2

关于可能出错的任何想法？以下是我正在初始化表格的方式......

$(document).ready(function() {
     $('#myTable').dataTable({
          "oLanguage": { "sSearch": "Filter Data" },
          "iDisplayLength": -1,
          "bJQueryUI": true,
          "sPaginationType": "full_numbers",
          "aoColumns": [
               { "sType": "title-numeric" }
           ]
      });
});

初始化表之前添加的插件代码在这里：

    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "title-numeric-pre": function ( a ) {
        var x = a.match(/title="*(-?[0-9\.]+)/)[1];
        return parseFloat( x );
    },

    "title-numeric-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "title-numeric-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

Answer 1

看起来正在进行字符串比较。您是否尝试在比较它们之前将a和b转换为使用parseInt函数的整数？

 return ((parseInt(a) < parseInt(b)) ? -1 : ((parseInt(a) > parseInt(b)) ? 1 : 0));

等...

编辑：

我当时不确定:( 这个确切的代码对我有用：

<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

        <meta charset=utf-8 />
        <title>Test</title>
    </head>
    <body>
        <div class="container">
            <table id="mytable" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Col1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                      <td><span title="5">This is 5</span></td>

                    </tr>
                    <tr>
                        <td><span title="4">This is 4</span></td>
                    </tr>
                    <tr>
                        <td><span title="2">This is 2</span></td>

                    </tr>
                    <tr>
                        <td><span title="17">This is 17</span></td>
                    </tr>
                    <tr>
                        <td><span title="10">This is 10</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

将此作为javascript：

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "title-numeric-pre": function ( a ) {
        var x = a.match(/title="*(-?[0-9\.]+)/)[1];
        return parseFloat( x );
    },

    "title-numeric-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "title-numeric-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

$(document).ready( function () {
  $('#mytable').DataTable({
     "oLanguage": { "sSearch": "Filter Data" },
          "iDisplayLength": -1,
          "bJQueryUI": true,
          "sPaginationType": "full_numbers",
          "aoColumns": [
               { "sType": "title-numeric" }
           ]
  });
} );

Answer 2

好的，我不确定这里有什么问题。

我刚刚将您的html更改为第二列，以便更好地查看排序，添加了<tr>s并使用了您的问题代码（刚删除了UI部分）。

  <tr>
    <td><span title="5">DATA HERE</span>
      </td>
      <td>5</td>
  </tr>
  <tr>
    <td><span title="4">DATA HERE</span>
    </td>
    <td>4</td>
  </tr>

当你看到这个plunker时，一切都按预期工作。

Answer 3

这是我用于标题数字排序扩展的内容（我还想过滤掉任何非数字字符）：

$.fn.dataTableExt.oSort['title-numeric-asc'] = function (a, b) {
    var x = a.match(/title="*(-?[0-9\.]+)/)[1];
    var y = b.match(/title="*(-?[0-9\.]+)/)[1];
    x = parseFloat(x);
    y = parseFloat(y);
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

$.fn.dataTableExt.oSort['title-numeric-desc'] = function (a, b) {
    var x = a.match(/title="*(-?[0-9\.]+)/)[1];
    var y = b.match(/title="*(-?[0-9\.]+)/)[1];
    x = parseFloat(x);
    y = parseFloat(y);
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

jQuery DataTable标题 - 数字排序

3 个答案: