Come posso ottenere jQuery DataTables per ordinare sul valore nascosto, ma cercare il valore visualizzato?

Question

Ho una semplice griglia DataTable che contiene colonne di date. Ho fornito due valori per la data nel mio set di dati JSON, uno per la visualizzazione e uno appositamente progettato in modo che DataTables possa ordinarlo. La mia applicazione web consente agli utenti di scegliere diversi formati di date, quindi deve essere flessibile.

Questo è il mio dato JSON che DataTables ricava dal server Web tramite sAjaxSource.

{ 
    Reports : [ 
    { Date: { Sort = "20101131133000", Display : "11/31/2010 1:30 PM" } }, 
    { Date: { Sort = "20100912120000", Display : "1200 EST 2010-09-12" } }, 
    ] 
} 

E 'facile dire DataTable per ordinare in base alla proprietà Date.SortValue e per rendere la proprietà Display visibile all'utente utilizzando fnRender(). Quindi questo mi porta a metà strada verso il mio obiettivo.

var dataTableConfig = { 
    sAjaxSource: "/getreports", 
    sAjaxDataProp: "Reports", 
    aoColumns: [ 
    { mDataProp: "User" }, 
    { mDataProp: "Date.Sort", 
     bSortable: true, 
     sName: "Date", 
     bUseRendered: false, 
     fnRender: function (oObj) { 
     return oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].sName].Display; 
     } 
    } 
    ] 
}; 

Ecco il mio problema. Desidero consentire all'utente di immettere un filtro (utilizzando l'input di filtro incorporato fornito da DataTables) in base al valore visualizzato, ma non è possibile.

Ad esempio. Se un utente ha inserito "EST", otterrebbe risultati pari a zero perché i filtri di dati si basano sul valore specificato in mDataProp non basato sul valore restituito da fnRender.

Qualcuno può aiutarmi a capire come ordinare e filtrare una colonna di date? Grazie.

Answer 1

Questo è un vecchio post, ma speriamo che questo aiuti qualcun altro che viene qui.

In una versione più recente di DataTable, bUseRendered e fnRender sono deprecati.

mRender è il nuovo modo di fare questo genere di cose e ha un approccio leggermente diverso.

È possibile risolvere il problema con qualcosa sulla falsariga di:

... 
{ mDataProp: "Date.Sort" 
    bSortable: true, 
    sName: "Date", 
    // this will return the Display value for everything 
    // except for when it's used for sorting, 
    // which then it will use the Sort value 
    mRender: function (data, type, full) { 
    if(type == 'sort') return data.Sort; 
    return data.Display 
    } 
} 
... 

Answer 2

provare un po 'diverso approccio:

Mettere entrambe le colonne della tabella (io li DateDisplay e DateSort chiamare), non utilizzare la funzione di rendering e solo nascondere la colonna DateSort. Quindi nella matrice aoColumns per la colonna DateDisplay inserire { "iDataSort": 2 }, dove 2 è un indice della colonna DateSort.

In questo caso, la colonna DateDisplay verrà mostrata nei dati originali e il filtro verrà eseguito da questa colonna, ma l'ordinamento verrà eseguito dai valori nella colonna DateSort.

Ci sono ulteriori dettagli sulla proprietà iDataSort sul sito di dati o nella sezione http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx "Configura ordinamento".

Answer 3

+1 JocaPC

vorrei aggiungere alla risposta di JocaPC ricordando a tutti che javascript utilizza le matrici zero indicizzati.

Esempio:

 
HiddenSortString (0) | Date (1)     | Some Text (2) 
................................................................... 
1349035566   | September 30, 2012 2:06 pm | blah blah 
1349118137   | October 01, 2012 1:02 pm | blah blah 
1349371297   | October 04, 2012 11:21 am | blah blah 
................................................................... 

Per ordinare il campo della data utilizzando la stringa nascosta si può usare il seguente.

$('.mytable').dataTable({ 
    "aoColumns": [{"bVisible": false},{"iDataSort": 0},null] 
}); 

Answer 4

Umm ... invece di passare attraverso tutto questo tiritera è sufficiente aggiungere un span nascosta con il vostro "Ordina per" al fronte:

<td><span style="display:none;">20101131133000</span>11/31/2010 1:30 PM</td> 

Nota: questo significa che si può eseguire la ricerca tramite il valore nascosto o mostrato ... questo può essere una conseguenza, non si può vivere con.

Answer 5

Credo che le risposte esistenti siano deprecate a causa degli aggiornamenti a DataTables. HTML5 supporta gli attributi che DataTables può utilizzare per ordinare facilmente le colonne. In particolare l'attributo data-sort. (Vedere https://datatables.net/examples/advanced_init/html5-data-attributes.html)

posso facilmente ordinare le tabelle in questo modo:

<table> 
    <thead> 
    <tr> 
     <td>Name</td> 
     <td>Age</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>John Doe</td> 
     <td data-sort="37">2/1/78 (37 years old)</td> 
    </tr> 
    <tr> 
     <td>Jane Doe</td> 
     <td data-sort="35">12/1/80 (35 years old)</td> 
    </tr> 
    </tbody> 
</table> 

Non importa che la colonna 'Age' contiene i numeri, simboli e lettere, DataTable potranno ordinare utilizzando il 'dati- ordina 'attributo.

Answer 6

È necessario ordinare la colonna in base a una colonna nascosta (Ordina). Per questo devi includere una colonna che contiene i dati di ordinamento, nascondere la colonna e ordinare la colonna di visualizzazione per la colonna nascosta.

"aoColumnDefs:[ 
    {"sTitle": "Display", "iDataSort":1, "aTargets":[2]}, 
    {"bVisible": false, "aTargets":[2]} 
    ], 

aoColumns: [ 
    { mData: "User" }, 
    { mData: "Display"}, 
    { mData: "Sort"} 
    ] 

Answer 7

Dato che i dati sono già disponibili in un formato ordinabile e visualizzabile, questo è tutto il codice necessario.

Utilizzerà Date.Sort per l'ordinamento e Date.Display per immagini. Questo è documentato here.

columns: [{ 
    data: 'Date', 
    render: { 
     _: 'Display', 
     sort: 'Sort' 
    } 
}]