Пользовательская функция сортировки DataTable работает, но не обновляет отображение таблицы

Question

Я пытаюсь отсортировать столбец с именем Priority. В этом столбце есть 5 возможных значений: High, Medium, Low, Unprioritized и N / A. Я хотел бы иметь возможность сортировать их в этом порядке (по возрастанию) или в обратном порядке (по убыванию). Мой подход заключался в создании пользовательской функции сортировки на основе того, что я нашел здесь . Вот что я сделал:

option["columnDefs"] = [
  {
    "render":function(data,type,row) {
      var $select;
      switch(data) {
       case: "High":
         $select = $('<div class="my-class-high" priority="high">High</div');
         break;
       case: "Medium":
         $select = $('<div class="my-class-medium" priority="medium">Medium</div');
         break;  
       // etc. for other values. 
      }
      return $select.prop("outerHTML");
     },
     "targets" : 7,
     "sType" : "priority" 
   }
];

function getRank(cellHtml) {
  switch ($(cellHtml).attr("priority")) {
  case "high":
    return 0;
  case "medium":
    return 1;
  case "low":
    return 2;
  case "unprioritized":
    return 3;
  case "notapplicable":
    return 4;
  default:
    throw "Unrecognized priority.";
  }
}

jQuery.fn.dataTableExt.oSort["priority-desc"] = function (x, y) {
  return getRank(x) < getRank(y);
};

jQuery.fn.dataTableExt.oSort["priority-asc"] = function (x, y) {
  return getRank(x) > getRank(y);
};

//further down...
   $(#mytable).DataTable(option);

Весь код, включая функцию сортировки, запускается, как и ожидалось. Когда я нажимаю на столбец Приоритет, глиф переворачивается. Моя проблема в том, что отображаемый порядок сортировки никогда не меняется: он остается при возрастании, что правильно отображается с Высокими приоритетами в верхней части таблицы.

Я создал временную функцию обработчика событий для проверки:

$(tableLookup).on('order.dt',function() {
   var order = table.order();
});

С этим я могу далее проверить, что порядок сортировки меняется (по крайней мере, внутри) каждый раз, когда я щелкаю заголовок столбца, даже если отображаемый порядок не обновляется.

Я использую jquery.dataTables.js версии 1.10.4.

Я также пытался использовать атрибут сортировки данных, как предложено в ответе Анджани, здесь . Это никак не влияет на порядок сортировки - таблица по-прежнему сортирует столбец по алфавиту, используя отображаемый текст.

Любые идеи, что может быть причиной этих проблем, которые я вижу, и как заставить работать сортировку?

Answer 1

Вы можете сделать это с помощью функции рендеринга. Второй аргумент функции рендеринга - это версия данных, которую запрашивает DataTables. Когда он равен sort, он запрашивает значение, которое следует использовать для сортировки. При этом вам не нужен пользовательский метод сортировки.

var example = $('#example').DataTable({
  columns: [
    null, 
    null, 
    {
      render: function(data,type,row) {
        if(type == 'sort'){
            return getRank(data.toLowerCase());
        }
        switch(data) {
        case "N/A":
            return '<div class="my-class-notapplicable">' + data + '</div>';
        default:
            return '<div class="my-class-' + data.toLowerCase() + '">' + data + '</div>';
        }
      }
    }
  ]
});
function getRank(data) {
  switch (data) {
    case "high":
      return 0;
    case "medium":
      return 1;
    case "low":
      return 2;
    case "unprioritized":
      return 3;
    case "n/a":
      return 4;
    default:
      throw "Unrecognized priority.";
  }
}

https://datatables.net/reference/option/columns.render

Answer 2

Это похоже на работу:

var example = $('#example').DataTable({
  columns: [
    null, 
    null, 
    {
      sType : "priority",
      render: function(data,type,row) {
        var retVal = $("<div/>");
        switch(data) {
          case "High":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data);
            break;
          case "Medium":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data)
            break;  
          case "Low":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data)
            break;  
          case "Unprioritized":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data)
            break;  
          case "N/A":
            retVal = retVal
              .addClass("my-class-notapplicable")
              .attr("data-priority", "notapplicable")
              .text(data)
            break;
        }
        return retVal.prop("outerHTML");
      }
    }
  ]
});
function getRank(data) {
  switch (data) {
    case "high":
      return 0;
    case "medium":
      return 1;
    case "low":
      return 2;
    case "unprioritized":
      return 3;
    case "notapplicable":
      return 4;
    default:
      throw "Unrecognized priority.";
  }
}
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "priority-pre": function ( a ) {
    return getRank($(a).data("priority"));
  },
  "priority-asc": function( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "priority-desc": function(a,b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});

Ваша функция рендеринга была заблокирована, поэтому я не уверен, действительно ли вы вызывали функцию ордера, всегда хорошая идея проверить, что говорит консоль.

Я осмелюсь сказать, что функция order могла бы быть приведена в порядок, и я не уверен, почему мне так сильно не нравятся операторы switch, но я действительно, действительно это делаю. YMMV хотя. Надеюсь, что это помогает, работает JSFiddle здесь .