PrimeNG: <p-table> пользовательская сортировка по датам

Question

Я использую primeNg <p-table> для реализации пользовательской сортировки для поля "Quarterly Results".

Дата в поле "Quarterly Results" указана ниже:

Q3-2017
2018
2017
Q1-2016
2000
Q3-2018
Q2-2012

Источник: https://primefaces.org/primeng/#/table/sort

Для сортировки данных я сделал ниже код:

HTML:

<p-table [value]="documents" (sortFunction)="customSort($event)" [customSort]="true">
        <ng-template pTemplate="header">
            <tr>
                <th [pSortableColumn]="quarter">
                    Quarterly Results
                    <p-sortIcon [field]="quarter"></p-sortIcon>
                </th>
            </tr>
        </ng-template>
    <ng-template pTemplate="body" let-doc>
        <tr>
            <td>
                {{doc.quarter}}
            </td>            
        </tr>
    </ng-template>
</p-table>

TS:

customSort(event: SortEvent) {
        event.data.sort((data1, data2) => {
            let value1 = data1[event.field];
            let value2 = data2[event.field];
            let result = null;

            if (value1 == null && value2 != null)
                result = -1;
            else if (value1 != null && value2 == null)
                result = 1;
            else if (value1 == null && value2 == null)
                result = 0;
            else if (typeof value1 === 'string' && typeof value2 === 'string')
                result = value1.localeCompare(value2);
            else
                result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

            return (event.order * result);
        });
    }

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я сортирую, данные не поступают, это правильный порядок сортировки. При первом выборе нажмите на данные, как (Q1-2016 до Q2-2012):

2000
2017
2018
Q1-2016
Q2-2012
Q3-2017
Q3-2018

и во втором порядке данные о кликах поступают, как показано ниже (Q2-2012 предшествует Q1-2016):

Q3-2018
Q3-2017
Q2-2012
Q1-2016
2018
2017
2000

Я хочу, чтобы данные сортировались как

2000
2017
2018
Q2-2012
Q1-2016
Q3-2017
Q3-2018

и при второй сортировке щелкните как:

Q3-2018
Q3-2017
Q1-2016
Q2-2012
2018
2017
2000

Пожалуйста, объясните мне, где я ошибся, если мои данные поступают не в том порядке, я также попытался "return value1 > value2 ? 1 : (value1 < value2 ? -1 : 0)". По какой логике мне не хватает? Пожалуйста, предложите

Я думаю, что проблема в этой строке result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

PS: я не могу использовать

Answer 1

(обратите внимание, что даты представлены в формате дд / мм / гггг, и в моем случае поля в формате даты - это "fec_ini", "fec_fin" и "fec").

customSort(event: SortEvent) {

    // console.log('SortEvent=', event);
    event.data.sort((data1, data2) => {

        let value1 = data1[event.field];
        let value2 = data2[event.field];
        let result = null;

        if (value1 == null && value2 != null) {
            result = -1;
        } 

        else if (value1 != null && value2 == null) {
            result = 1;
        } 

        else if (value1 == null && value2 == null) {
            result = 0;
        } 

        else if (typeof value1 === 'string' && typeof value2 === 'string') {

            if ((event.field === 'fec_ini') || (event.field === 'fec_fin') || (event.field === 'fecha')) {
                const x = value1.split('/');
                const y = value2.split('/');
                value1 = x[2] + x[1] + x[0];
                value2 = y[2] + y[1] + y[0];
                // console.log('x=', value1, x);
                // console.log('y=', value2, y);
            }

            result = value1.localeCompare(value2);
        }  

        else {
            result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0; 
        }

        return (event.order * result);

    });

}

Answer 2

Если вы сравниваете строки, правильно, что Q2-2012 больше, чем Q1-2016.

Вы можете попробовать следующую функцию customSort:

 customSort(event: any) {
        event.data.sort((data1, data2) => {

            let value1 = data1[event.field];
            let value2 = data2[event.field];
            let result = null;

            if (value1 == null && value2 != null)
                result = -1;
            else if (value1 != null && value2 == null)
                result = 1;
            else if (value1 == null && value2 == null)
                result = 0;
            else if (typeof value1 === 'string' && typeof value2 === 'string'){
                if(event.field === "quarter"){
                  console.log("sort..."+event.field)
                  let o1 = value1.split('-')
                  let o2 = value2.split('-')
                  let value1Q = o1.length == 2 ? o1[0] : "";
                  let value1Y = o1.length == 2 ? o1[1] :  o1[0];
                  let value2Q = o2.length == 2 ? o2[0] : "";
                  let value2Y = o2.length == 2 ? o2[1] :  o2[0];
                  if(value1Y.localeCompare(value2Y)===0){
                    result = value1Q.localeCompare(value2Q)
                  } else {
                    result = value1Y.localeCompare(value2Y)
                  }
                } else{
                  result = value1.localeCompare(value2);
                }

            }
            else
                result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

            return (event.order * result);
        });
    }

Ниже вы можете найти рабочий образец:

stackblitz

приложение