jQuery dataTables сортировка не работает для формата (mm / dd / yyyy) [duplicate]

скажем, у нас есть массив элементов в вашем состоянии:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>
39
задан Zaheer Ahmed 17 August 2012 в 10:32
поделиться

20 ответов

jQuery Solution

Здесь работает jQuery-решение .

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
    var ukDatea = a.split('/');
    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},

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

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

Добавьте приведенный выше код в сценарий и задайте конкретный столбец значениями даты с { "sType": "date-uk" } и другие как null, см. ниже:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            { "sType": "date-uk" },
            null
        ]
    });
    });

Решение для CSS

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

Здесь работает решение CSS

HTML

<td><span class='hide'>YYYYMMDD</span>DD/MM/YYYY</td>

CSS

.hide {
    display:none; 
}
77
ответ дан Zaheer Ahmed 25 August 2018 в 08:33
поделиться

Используйте атрибут data-order в теге <td>, например, (пример Ruby):

    <td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>

Ваша функция декоратора здесь будет:

    def date
    object.date&.strftime("%d/%m/%Y")
    end
0
ответ дан aabiro 25 August 2018 в 08:33
поделиться

используйте этот фрагмент!

$(document).ready(function() {
 $.fn.dataTable.moment = function ( format, locale ) {
    var types = $.fn.dataTable.ext.type;

    // Add type detection
    types.detect.unshift( function ( d ) {
        return moment( d, format, locale, true ).isValid() ?
            'moment-'+format :
            null;
    } );

    // Add sorting method - use an integer for the sorting
    types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
        return moment( d, format, locale, true ).unix();
    };
};

$.fn.dataTable.moment('DD/MM/YYYY');

$('#example').DataTable();
});

момент js хорошо работает для всех форматов даты и времени, добавьте этот сниппер, прежде чем инициализировать datatable, как я сделал ранее.

] Также не забудьте загрузить http://momentjs.com/

0
ответ дан Anit Bibin 25 August 2018 в 08:33
поделиться

Дата Сортировка - со скрытым элементом

Преобразование даты в формат YYYYMMDD и добавление к фактическому значению ( DD / MM / YYYY ) в <td>, оберните его в элемент, установите стиль display:none; в элементы. Теперь сортировка даты будет работать как обычная сортировка. То же самое можно применить к сортировке даты и времени.

HTML

<table id="data-table">
   <tr>
     <td><span>YYYYMMDD</span>DD/MM/YYYY</td>
   </tr>
</table>

CSS

#data-table span {
    display:none; 
}
53
ответ дан Anulal S 25 August 2018 в 08:33
поделиться

Как я нашел, самый простой способ сортировки в этом случае - добавить параметр «aaSorting» в JS.

Например:

$(document).ready(function() {
    $('#contacts-table').dataTable({
        "aaSorting": [0, 'desc']
});

Проблема заключается в том, что в этом примере будут сортироваться записи из 1-го столбца, такие как STRING, но не как даты. Если исходный код позволяет вам изменить формат даты с dd / mm / yyyy на yyyy / mm / dd, «aaSorting» будет работать правильно для вас.

0
ответ дан Boris Georgiev 25 August 2018 в 08:33
поделиться

Для меня, похоже, было

нажать полный объект datetime, выбранный с помощью запроса select из моего db в наборе данных, который будет рисоваться по формату datatable »2018-01-05 08:45: 56 "

then

    $('#Table').DataTable({
        data: dataset,
        deferRender: 200,
        destroy: true,
        scrollY: false,
        scrollCollapse: true,
        scroller: true,
        "order": [[2, "desc"]],
        'columnDefs': [
            {
                'targets': 2,
                'createdCell':  function (td, cellData, rowData, row, col) {                        
                    var datestamp = new Date(cellData);
                    $(td).html(datestamp.getUTCDate() + '-' + (datestamp.getMonth()+1) + '-' + datestamp.getFullYear());
                }
            }
        ],
        "initComplete": function(settings, json) {
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();               
        }
    });

Строки сортируются правильно, тогда я получаю html, который я хочу в строке

0
ответ дан Gringo 25 August 2018 в 08:33
поделиться

в php или js просто передают массив и используют ортогональные, например:

$var[0][0] = "like as u wish, 30/12/2015 or something else";
$var[0][1] = strtotime($your_date_variable);

и в datatable ...

$('#data-table-contas_pagar').dataTable({
    "columnDefs": [
        {"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}}
    ]
});
1
ответ дан labplace 25 August 2018 в 08:33
поделиться

Я использовал в остальном вызов

** Date Variable: Created **

var call = $.ajax({
            url: "../_api/Web/Lists/GetByTitle('NewUser')/items?$filter=(Created%20ge%20datetime'"+FromDate+"')%20and%20(Created%20le%20datetime'"+ToDate+"' and Title eq '"+epf+"' )&$top=5000",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }

            });

  call.done(function (data,textStatus, jqXHR){
        $('#example').dataTable({
            "bDestroy": true,
            "bProcessing": true,
            "aaData": data.d.results,
            "aLengthMenu" : [
             [50,100],
             [50,100]
            ],
             dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel'
            ],

            "aoColumnDefs": [{ "bVisible": false  }],
            "aoColumns": [
                { "mData": "ID" },
                { "mData": "Title" },
                { "mData": "EmployeeName" },
                { "mData": "Department1" },
                { "mData": "ServicingAt" },
                { "mData": "TestField" }, 
                { "mData": "BranchCode" },   
                { "mData": "Created" ,"render": function (data, type, row) {
        data = moment(data).format('DD MMM YYYY');
        return data;
    }
0
ответ дан MAFAIZ 25 August 2018 в 08:33
поделиться

Я попробовал это и работал для меня.

https://github.com/sedovsek/DataTables-EU-date-Plug-In

] Я использовал режим format .ToString("dd/MM/yyyy");, тогда в моем jQuery.Datatable отлично работает.

jQ ниже

oTable = $('#grid').dataTable({
    "sPaginationType": "full_numbers",
    "aoColumns": [
        { "sType": "eu_date" },
        null
    ]
});
});

В столбце у вас есть даты, вы должны определить с помощью sType, например код выше.

0
ответ дан Marcelo 25 August 2018 в 08:33
поделиться

Я знаю, что это старый вопрос, и ответы тоже старые. Недавно я столкнулся с простым и чистым способом сортировки дат. Это может быть сделано атрибутом HTML5 data-order для элемента <td>.

Вот что я сделал в своем PHP:

<?php
$newdate = date('d M Y', $myDateTime); // Format in which I want to display
$dateOrder = date('Y-m-d', $myDateTime); // Sort Order
?>

<td data-order="<?php echo $dateOrder; ?>" >
<?php echo $newdate; ?>
</td>
22
ответ дан maxx777 25 August 2018 в 08:33
поделиться

Если вы получаете свои даты из базы данных и делаете цикл for для каждой строки и добавляете ее в строку, используемую в javascript для автоматического заполнения данных, это должно выглядеть так. Обратите внимание, что при использовании скрытого трюка диапазона вам нужно учитывать однозначные числа даты, например, если он находится на 6-м часе, вам нужно добавить ноль перед тем, как иначе трюк диапазона не будет работать при сортировке. Пример кода:

 DateTime getDate2 = Convert.ToDateTime(row["date"]);
 var hour = getDate2.Hour.ToString();
 if (hour.Length == 1)
 {
 hour = "0" + hour;
 }
 var minutes = getDate2.Minute.ToString();
 if (minutes.Length == 1)
 {
 minutes = "0" + minutes;
 }
 var year = getDate2.Year.ToString();
 var month = getDate2.Month.ToString();
 if (month.Length == 1)
 {
 month = "0" + month;
 }
 var day = getDate2.Day.ToString();
 if (day.Length == 1)
 {
 day = "0" + day;
 }
 var dateForSorting = year + month + day + hour + minutes; 
 dataFromDatabase.Append("<span style=\u0022display:none;\u0022>" + dateForSorting +
 </span>");
0
ответ дан NC25 25 August 2018 в 08:33
поделиться

Другое решение: https://datatables.net/blog/2014-12-18

с двумя javascripts libs: //cdnjs.cloudflare.com/ajax /libs/moment.js/2.8.4/moment.min.js и //cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js

, то только это :

$ (document) .ready (function () {

$.fn.dataTable.moment( 'DD/MM/YYYY' );

$('#example').DataTable(); 

});

1
ответ дан Patrikoko 25 August 2018 в 08:33
поделиться

Если вы не хотите использовать momentum.js или любую другую дату, вы можете добавить формат даты в миллисекундах в значении даты, чтобы сортировка читалась в соответствии с миллисекундой. И скрыть формат даты в миллисекундах.

Пример кода:

var date = new Date();
var millisecond = Date.parse(date);

HTML

<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>

Вот и все.

1
ответ дан Prachi 25 August 2018 в 08:33
поделиться

Самый простой способ сортировки этой проблемы

Просто немного измените свой дизайн, как это

//Add this data order attribute to td
<td data-order="@item.CreatedOn.ToUnixTimeStamp()">
                                    @item.CreatedOn
                                </td>
                                
                                
               
               Add create this Date Time helper function
// #region Region 
 public static long ToUnixTimeStamp(this DateTime dateTime) {
 TimeSpan timeSpan = (dateTime - new DateTime(1970, 1, 1, 0, 0, 0));
     return (long)timeSpan.TotalSeconds;
     } 
     #endregion

0
ответ дан Rohit Manocha 25 August 2018 в 08:33
поделиться

Я хотел бы указать, что при использовании данных с сервера через Ajax решение супер просто, но может не сразу проявиться.

При возврате массива порядка сортировки Datatables отправит (в $_POST) 2-элементный массив, который будет эквивалентен :

$_POST['order'][0] =array('column'=>'SortColumnName', 'dir'=>'asc'); 
// 2nd element is either 'asc' or 'desc'

Поэтому вы можете отображать дату в любом формате, который вы хотите; просто сервер возвращает критерии сортировки, основанные только на sortColumnName.

Например, в PHP (с MySQL) я использую следующее:

 if (isset($_POST['order'])) {
          switch ($_POST['order'][0]['column']) {
               case 0:// sort by Primary Key
                    $order = 'pkItemid';
                    break;
               case 1:// Sort by reference number
                    $order = 'refNo';
                    break;
               case 2://Date Started
                    $order = 'dOpen';
                    break;
               default :
                    $order = 'pkItemid';
          }
          $orderdir = ($_POST['order'][0]['dir'] === 'desc') ? 'desc' : 'asc';
     }

Примечание, что, поскольку ничто из $_POST не передано в $order или $orderdir, атака между скриптами невозможна.

Теперь просто добавьте к запросу MySQL:

$sql ="SELECT pkItemid, refNo, DATE_FORMAT(dOpen,'%b %e, %Y') AS dateStarted
       FROM tblReference 
       ORDER BY $order $orderdir;";

запустите запрос и верните только значение dateStarted в Datatables в json.

0
ответ дан Sablefoste 25 August 2018 в 08:33
поделиться

У меня тоже была проблема.

Я использовал span с td как 03/21/2017, делая это, datatable рассматривал это как строку и сортировка не работала.

Я удалил span внутри td, и он был исправлен. например, 03/21/2017

0
ответ дан Srinivas Ch 25 August 2018 в 08:33
поделиться

Это решение совершенно неверно. Вы не можете преобразовать дату в число, просто добавляя каждый компонент даты. Если вы попробуете эту логику, например, со следующими датами, вы увидите, что она будет неверной:

20/01/2014 = 2035 15/02/2014 = 2031

Дата ведьмы на первом месте, по возрастанию? 20 января? Не в соответствии с этой логикой: P

Правильный способ выполнения метода parsedate состоит в том, чтобы преобразовать строку в действительное datetime, и они используют функцию getTime для правильного упорядочения таблицы.

var day = a.split('/')[0]
var month = a.split('/')[1]
var year = a.split('/')[2]

var date = new Date(month + "/" + day + "/" + year)
return date.getTime()
0
ответ дан Stormhashe 25 August 2018 в 08:33
поделиться

Попробуйте этот плагин .

Как указано здесь , вам нужно включить Moment.js и плагин datatable-moment, а затем просто объявить формат даты, который вы используете. Плагин автоматически определит ваши столбцы даты и отсортирует их так, как должно быть. Для объяснений формата moment.js, проверьте здесь .

Пример:

$(document).ready(function() {
    $.fn.dataTable.moment('DD/MM/YYYY HH:mm');
    $('#example').DataTable();
});
4
ответ дан ThEBiShOp 25 August 2018 в 08:33
поделиться

Посмотрите это официальное решение DataTable, используя Moment.js:

Окончательный плагин сортировки даты / времени

https://datatables.net/blog / 2014-12-18

0
ответ дан Wesley Pimentel 25 August 2018 в 08:33
поделиться

Решение Захера Ахмеда прекрасно работает, если вам нужно иметь дело с уже установленной датой.

У меня возникла проблема с этим решением, потому что мне пришлось управлять датой в США.

Я понял это с помощью этого крошечного изменения:

function parseDate(a) {
    var ukDatea = a.split('/');
    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
}

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-uk-pre": function ( a ) {
        return parseDate(a);
    },

    "date-uk-asc": function ( a, b ) {
        a = parseDate(a);
        b = parseDate(b);
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "date-uk-desc": function ( a, b ) {
        a = parseDate(a);
        b = parseDate(b);
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

Следуя вашему определению «aoColumns».

0
ответ дан Yobac 25 August 2018 в 08:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: