Правильная сортировка дат с использованием TableSorter и <div> s

0

Я использую таблицу, использующую s для получения данных. Это делается потому, что он захватывает информацию из базы данных, и для целей проектирования это было сделано именно так. Теперь я недавно получил tablesorter, чтобы работать отлично, но я не могу заставить его работать с датами, он сортирует строки по числу дней. Я использую формат dd-MMM-yyyy (то есть 02-окт-2011). Я изменил исходный код, но это почти такая же концепция. Я попытался использовать addParser() который поставляется с tablesorter, но мне не повезло.

Вот HTML:

<table class="tablesorter">
<thead>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td id='101' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>20-Oct-2013</div></td>
        <td id='201' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>21-Dec-2013</div></td>
        <td id='301' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>22-Nov-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='401' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>23-Oct-2013</div></td></tr>
    <tr>
        <td id='102' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>20-Sep-2013</div></td>
        <td id='202' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>21-Aug-2013</div></td>
        <td id='302' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>22-Jul-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='402' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>23-Jun-2013</div></td>
    </tr>
        <tr>
        <td id='103' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>20-Apr-2013</div></td>
        <td id='203' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>21-Mar-2013</div></td>
        <td id='303' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>22-Feb-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='403' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>23-Jan-2013</div></td>
    </tr><tr>
        <td id='104' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>03-Jan-2013</div></td>
        <td id='204' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>11-Oct-2013</div></td>
        <td id='304' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>30-Jun-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='404' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>12-Sep-2013</div></td>
    </tr>
</tbody>

И вот JS, чтобы вызвать tablesorter, который я использую:

$('table').tablesorter({
    // include zeba widgets
    widgets: ['zebra'],
    // initial sort
    sortList: [[0, 0], [2, 0]]
});

Вот обновленный jsFiddle: http://jsfiddle.net/Q22Yj/9/ Просто пойдите и попробуйте сортировать его и посмотреть, как ни одна из дат не будет правильно отсортирована

  • 1
    У @PSL есть правильный ответ для вас, но я также заметил, что вы делаете ячейки таблицы редактируемыми. Обязательно запустите событие updateCell для отредактированных ячеек, чтобы они правильно сортировались ( вот пример из редактируемого виджета).
  • 0
    @Mottie Да, по какой-то причине, когда я вызываю данные из БД, дата не сортируется правильно, все остальное сортируется нормально, кроме дат
Показать ещё 2 комментария
Теги:
sorting
tablesorter

1 ответ

2
Лучший ответ

В соответствии с документацией вы можете указать формат даты в конструкторе для сортировщика таблиц для таких столбцов.

 headers: {

        0: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },
        1: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },
        2: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },
        3: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },

    },

В этом случае, поскольку вы используете действительные разделители, вы также можете:

 headers: {
        0: {
            sorter: "shortDate"
        },
        1: {
            sorter: "shortDate"
        },
        2: {
            sorter: "shortDate"
        },
        3: {
            sorter: "shortDate"
        },

    },

демонстрация

Поделиться
  • 0
    Привет PSL, спасибо за ваш ответ, поэтому я выяснил, почему он не работает правильно, хотя ваш код имеет смысл. Один из столбцов (самый важный) имеет изображение рядом с <div> с датой, что приводит к неправильной сортировке. Проверьте это jsFiddle: jsfiddle.net/Q22Yj/8 любая идея, как это можно решить ??
  • 0
    @randomizertech Это работает для меня .. Вы не применили код из моего ответа. jsfiddle.net/MVQKM
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню