Как правильно отсортировать по дате с помощью таблиц данных плагина jQuery - PullRequest
1 голос
/ 08 декабря 2011

Я хотел бы знать, как правильно сортировать свои таблицы по дате.Я использую jquery с плагином Data Tables (http://datatables.net/).

). Я также нашел на этом сайте полезный плагин для своей проблемы, который я интегрировал в свой код. Мой JS-код выглядит так:

<script>
$(document).ready(function() {

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

   var oTable = $('#example').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            null,
            { "sType": "uk_date" },
            null,
            null,
            null,
            null,
            null
        ]
    } );


$(".search_init").click(function(){
    var input_value = $(this).val();
    $(this).val("");
});     

$("tfoot input").keyup( function () {
    oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

});
</script>

Моя таблица выглядит следующим образом:

<table id="example">
<thead>
    <tr>
        <th>Some Text</th>
        <th>Date</th>
        <th>Some Text</th>
        <th>Some Text</th>
        <th>Some Text</th>
        <th>Some Text</th>
        <th>Some Text</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Some text</td>
        <td>22/07/2011</td>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
    </tr>
    ...
</tbody>
<tfoot>
    <tr>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
    </tr>
</tfoot>
</table>

Может кто-нибудь объяснить мне, почему это не работает? Я могу отсортировать каждый столбец, кроме столбца с датами в нем.

Я включаю следующие библиотеки:

<script src="[PATH]/js/jquery-1.6.2.min.js" language="JavaScript" type="text/javascript"></script>
<script src="[PATH]/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="[PATH]/js/jquery.dataTables.min.js" language="JavaScript" type="text/javascript"></script>
<script src="[PATH]/js/ZeroClipboard.js" type="text/javascript" charset="utf-8"></script>
<script src="[PATH]/js/TableTools.js" type="text/javascript" charset="utf-8"></script>

Ответы [ 3 ]

1 голос
/ 08 декабря 2011

Если вы хотите попробовать другой плагин, вот решение для популярного плагина Tablesorter , который я использовал в прошлом.В основном просто используйте плагин и создайте собственный анализатор для ваших дат.

Вот парсер дат, который я создал:

/*
* Parser Type: DateTime
* Parser Format: "ddd, MMM d, yyyy h:mm tt"
*/
$.tablesorter.addParser({
    // set a unique id
    id: 'LongDateTimeFormat',
    is: function (s) {
        // return false so this parser is not auto detected 
        return false;
    },
    format: function (s) {
        s = s.trim();

        // format your data for normalization
        s = s.match(/(?!^[A-Za-z]{3}, )[A-Za-z]{3} [0-9]{1,2}, [0-9]{4} [0-9]{1,2}:[0-9]{2}/) + ":00 " + s.match(/[A-Z]{2}$/);

        return new Date(s).getTime();
    },
    // set type, either numeric or text 
    type: 'numeric'
});

Ожидаемый формат даты: "ddd, MMM d, гггг h: мм тт ", как указано выше.Анализатор преобразует строку даты в объект даты и возвращает количество миллисекунд с полуночи 1 января 1970 года до указанной даты.

0 голосов
/ 08 сентября 2017

Просто напишите дату в формате "ГГГГММДД", в стиле которого нет отображения перед просмотром даты.

Пример кода

<table id="example" class="table" width="100%" cellspacing="0" data-order='[[ 1, "asc" ]]' data-page-length='100'>
                        <thead>
                            <tr>
                                <th>Sl.No</th>
                                <th>Date</th>
                                <th>Name</th>
                            </tr>
                        </thead>

                        <tbody>
        <tr>
            <td>1</td>
            <td><span style="display:none;">YYYYMMDD</span>DD/MM/YYYY</td>
            <td>P K Jena</td>
        </tr>
        <tr>
            <td>2</td>
            <td><span style="display:none;">YYYYMMDD</span>DD/MM/YYYY</td>
            <td>P Kumar</td>
        </tr>
</tbody>
</table>
0 голосов
/ 01 февраля 2017

Этот работает для меня.

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "uk_date-pre": function (a) {       

          if (a!=""&&a!=null)
            {
              var date = a.split('/');
              var x= (Number(date[2]) * 10000 + Number(date[1]) * 100 + Number(date[0])) * 1;
              return x;
            }
            else return 0;
            },

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

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