Question

我是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更改为浮动类型，但这不起作用，我也尝试过LocaleString。我想问题是我有百分比，而在我的语言中，我们使用逗号而不是小数表示的点。

你能建议一个解决方案吗？

Answer 1

您想要做什么，数值与否，就是要有自定义排序结果。

这种排序意味着您可以根据排序方向（asc / desc）更改值，以便对最后一行进行排序。

我的第一个想法是使用隐藏列，其数字类似于＆＃34; 10000＆＃34;如果上一栏中有短划线。这很有效......但是在desc命令上，再一次，虚线回到顶部。

每个回调和事件似乎都发生在DataTables对行进行排序之后。所以我无法按降序将值更改为零。在排序之前没有＆＃34;＆＃34;可悲的是，哈利。

所有这一切都非常复杂，没有大的结果。

所以就在我即将放弃的时候，我有了相反的想法。在排序＆＃34;之前它没有工作，然后让＃34;修复＆＃34;排序后。我需要的只是哪一行触发排序。

我最终使用了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

调整输入以在JavaScript

1 个答案: