DataTables: сортировать по числовому заказу данных не работает?

Question

Я использую DataTables версии 1.10. Я хочу сделать столбец отсортированным по числовому значению, когда значение, указанное в столбце, не является числовым.

Я вижу, что what I need to do is add a data-sort attribute для каждой ячейки таблицы. Я попытался добавить это с помощью метода createdRow, но хотя я вижу атрибут в HTML, он не сортируется численно.

Это мой код:

var data = [ 
     { 
      'name': 'France', 
      'played': 1000, 
      'won': 11 
     }, 
     { 
      'name': 'England', 
      'played': 1000, 
      'won': 100 
     }, 
     { 
      'name': 'Germany', 
      'played': 1000, 
      'won': 109 
     } 
    ]; 
    $.each(data, function(i, d) { 
     d.won_percent = (d.won/d.played) * 100; 
     d.won_display = d.won + '/' + d.played; 
     d.won_display += ' ('; 
     d.won_display += Math.round(d.won_percent * 10)/10; 
     d.won_display += '%)'; 
    }); 
    var columns = [ 
    { "data": "name", 
     "title": "Country" 
    }, 
    { "data": "won_display", 
     "title": "Games won" 
    }, 
    { "data": null, 
     "title": "Notes", 
    "defaultContent": 'Some other text here, included just to test that responsive works' 
    } 
    ]; 
    var html = '<table class="table table-bordered table-hover" cellspacing="0" width="100%" id="myTable"></table>'; 
    $('#table').html(html); 
    $("#myTable").DataTable({ 
    data: data, 
    columns: columns, 
    order:[[1, "desc"]], 
    responsive: true, 
    paging: false, 
    searching: false, 
    createdRow: function (row, data, rowIndex) { 
     $.each($('td', row), function (colIndex) { 
     if (colIndex === 1) { 
      $(this).attr('data-order', data.won_percent); 
     } 
     }); 
    } 
    }); 
}); 

Как я могу получить мой стол для сортировки по значению d.won_percent?

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

JSFiddle здесь: http://jsfiddle.net/07nk5wob/5/

Answer 1

РЕШЕНИЕ

Вы можете использовать orthogonal data, который используется термином jQuery DataTables для предоставления различных данных для операций отображения, сортировки и фильтрации.

Также вам необходимо явно указать тип данных столбца с помощью type: "num".

$.each(data, function (i, d) { 
    d.won_percent = { 
     sort: (d.won/d.played) * 100 
    }; 
    d.won_percent.display = 
     d.won + '/' + d.played + 
     ' (' + Math.round(d.won_percent.sort * 10)/10 + '%)'; 
}); 

// ... skipped ... 

{ 
    "data": "won_percent", 
    "title": "Games won", 
    "type": "num", 
    "render": { 
     "_": "display", 
     "sort": "sort" 
    } 
}, 

DEMO

См updated jsFiddle для кода и демонстрации.

ССЫЛКИ

• Orthogonal data example

Answer 2

Работа скрипку здесь: http://jsfiddle.net/annoyingmouse/07nk5wob/9/

В основном вам нужно special сортировки штучка:

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "special-pre": function (a) { 
     var regExp = /\(([^)]+)\)/; 
     var matches = regExp.exec(a); 
     return parseFloat(matches[1]); 
    }, 
    "special-asc": function (a, b) { 
     return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
    }, 
    "special-desc": function (a, b) { 
     return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
    } 
}); 

Answer 3

Вот рабочий fiddle для вашей проблемы.

Вы можете реализовать свой собственный плагин для сортировки, чтобы сделать это. Это довольно просто. Здесь я расширяю плагин DataTable, добавляя метод сортировки percentage. Вы можете видеть в методе percentage-pre, я возвращаю только числовое значение, которое вы хотите отсортировать.

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "percentage-pre": function (a) { 
     var regExp = /\(([^)]+)\)/; 
     var matches = regExp.exec(a); 
     var exactVal = matches[1]; 
     return parseFloat(exactVal.slice(0, -1)); 
    }, 
    "percentage-asc": function (a, b) { 
     return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
    }, 
    "percentage-desc": function (a, b) { 
     return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
    } 
}); 

Тогда в приведенном выше скрипку вы можете видеть, я добавляю ниже код в DataTable методе инициализации:

columnDefs: [ 
    { type: 'percentage', targets: 1 } 
] 

Надежда это то, что вам нужно!

Answer 4

вот родной способ сделать это

добавить "columnDefs" объект внутри установки DataTables объекта

columnDefs: [ 
    { 
    targets: [1], // cell target 
     render: function(data, type, full, meta) { 
      if(type === "sort") { 
       var api = new $.fn.dataTable.Api(meta.settings); 
       var td = api.cell({row: meta.row, column: meta.col}).node(); // the td of the row 
       data = $(td).attr('data-order'); // the data it should be sorted by 
      } 
      return data; 
     } 
    }, 
    ], 

здесь рабочая скрипку: http://jsfiddle.net/07nk5wob/6/