调整 JavaScript 中代码排序的输入

Posted 2023-05-09

【中文标题】调整 JavaScript 中代码排序的输入

【英文标题】：Adjusting input for sorting code in JavaScript

【发布时间】：2018-02-25 01:34:56

【问题描述】：

我是 javascript 的初学者，正在创建一个带有动态排序表的静态网站。我正在使用 jQuery 的 DataTables 插件。

我遇到的问题是某些单元格是空的，或者有破折号而不是数值。在 DataTables 的排序方法下，这些单元格显示在顶部以进行升序排序。但是，我希望这些单元格始终显示在底部（因为它们不包含任何有用的信息）。

这里是该站点的完整源代码链接：http://lerium.com/wip/index.html

正如您在源代码中看到的，我正在尝试对第 3 列和第 4 列使用以下脚本：

function testNumericEmptyBottom(a, b, high) 
        var reg = /[+-]?((\d+(\.\d*)?)|\.\d+)([eE][+-]?[0-9]+)?/;
        a = $(a).text().match(reg);
        a = a !== null && parseInt(a[0]) !== 0 ? parseInt(a[0]) : high;
        b = $(b).text().match(reg);
        b = b !== null && parseInt(b[0]) !== 0 ? parseInt(b[0]) : high;
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    
    jQuery.extend(jQuery.fn.dataTableExt.oSort, 
        "numeric-empty-bottom-asc": function(a, b) 
            return testNumericEmptyBottom(a, b, Number.POSITIVE_INFINITY);
        ,
        "numeric-empty-bottom-desc": function(a, b) 
            return testNumericEmptyBottom(a, b, Number.NEGATIVE_INFINITY) * -1;
        
    );

但是，因为数字不是整数，所以这不起作用。我曾尝试将 parseInt 更改为浮动类型，但这不起作用，我还尝试了 toLocaleString。我想问题是我有百分比，在我的语言中，我们使用逗号而不是点来表示小数点。

您能提出解决方案吗？

【参考方案1】：

你想要做的，不管数值与否，是有一个自定义的排序结果。

这种排序意味着您可以根据排序方向 (asc/desc) 更改值以使其在最后一行进行排序。

我的第一个想法是，如果前一列中有破折号，则使用数字为“10000”的隐藏列。这行得通...但是在desc 订单上，虚线又回到了顶部。

每个回调和事件似乎都是在 DataTables 对行进行排序之后发生的。所以我不能按降序将值更改为零。 遗憾的是，没有“排序前”挂钩。

这一切都相当复杂，没有什么大的结果。

所以就在我准备放弃的时候，我有了相反的想法。它在“排序之前”不起作用，然后让“修复”之后的排序。我只需要哪一行触发排序。

我最终使用了drawCallback，与许多回调一样，它提供了完整的 Datatables 对象。我在那个对象中找到了排序方向和触发列。

现在剩下要做的就是循环遍历每一行以检查该列索引中包含的 HTML...如果找到破折号，则将整行附加到表的末尾。

这行得通！

$(document).ready(function() 

  var datatable = $('#lan').DataTable(
    "paging": false,
    "ordering": true,
    "info": false,
    "searching": false,
    "drawCallback" : renderFix
  );

  function renderFix(dataTableObj)

    var counter = 0;

    // Get the sorting direction and the column index which triggered
    var direction = dataTableObj.aaSorting[0][1];
    var triggerringCol = dataTableObj.aaSorting[0][0];
    console.log("Sorted column "+triggerringCol+", "+direction+"ending.");

    // If the trigger to sort occured on a column in this array
    var columnsToChange = [2,3,4,5];
    if(columnsToChange.indexOf(triggerringCol) != -1)

      // On each row in the "triggering column",
      // if the HTML is "-", append it to the end.
      // The result is a "move".
      $(".container tbody tr").each(function()
        thisTD = $(this).find("td").eq(triggerringCol);

        if( thisTD.html() == "-" )
          $('#lan').append( $(this) );
          counter++;
        

      );
      console.log(counter+" row(s) moved down.")
    
   // renderFix

); // Ready

CodePen

【讨论】：

很好解释的解决方案！既然原来的方法行不通，那就试试别的方法吧。