Comment puis-je obtenir jQuery DataTables pour trier sur la valeur cachée, mais la recherche sur la valeur affichée?
J'ai un simple DataTables grille qui contient des colonnes de date. J'ai fourni deux valeurs pour la date dans mon JSON ensemble de données, une pour l'affichage et un spécialement conçu de sorte que les DataTables pouvez les trier. Mon application web permet aux utilisateurs de choisir un tas de différents formats de date, de sorte qu'il doit être flexible.
C'est mes données JSON qui obtient à partir de tables de données à partir du serveur web via sAjaxSource
.
{
Reports : [
{ Date: { Sort = "20101131133000", Display : "11/31/2010 1:30 PM" } },
{ Date: { Sort = "20100912120000", Display : "1200 EST 2010-09-12" } },
]
}
Il est facile de dire DataTables de tri basé sur le Date.SortValue
de la propriété et de faire le Display
propriété visible par l'utilisateur à l'aide de fnRender()
. C'est moi à mi-chemin de mon objectif.
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;
}
}
]
};
Voici mon problème. Je veux permettre à l'utilisateur de saisir un filtre (à l'aide de la built-dans le filtre d'entrée que les tables de données fournit) sur base de la valeur affichée, mais ils ne le peuvent pas.
Par exemple. Si un utilisateur a entré "EST", ils obtiendraient des résultats nuls parce que les tables de données des filtres en fonction de la valeur spécifiée dans mDataProp
pas basée sur la valeur retournée par fnRender
.
Quelqu'un peut-il m'aider à comprendre la façon de trier ET de filtrer une colonne de date? Merci.
- La bonne réponse à cette question a changé depuis les tables de données a été mis à jour. Je ne suis pas sûr de ce que SI la politique est sur la modification de la accepté de répondre vs obtenir la réponse mise à jour, mais l'un ou l'autre pourrait être à portée de main peut-être?
- Je suis heureux de changer la accepté de répondre. Je n'ai pas utiliser les tables de données plus longtemps, peut vous conseiller sur ce qui est mieux?
- CW Lance réponse marquée
Nov 5 '13 at 7:12
semble être correcte, et a travaillé pour moi. - Ok j'ai mis à Jour
Vous devez vous connecter pour publier un commentaire.
C'est un vieux post, mais j'espère que cela aidera quelqu'un d'autre qui vient ici.
Dans une version plus récente de DataTables,
bUseRendered
etfnRender
sont obsolètes.mRender
est la nouvelle façon de faire ce genre de chose et a une approche légèrement différente.Vous pouvez résoudre votre problème avec quelque chose le long des lignes de:
iDataSort
est obsolète, en faisant cette réponse correcte.Je crois que les questions /réponses sont déconseillés en raison des mises à jour des tables de données. HTML5 prend en charge les attributs que les tables de données permet de facilement trier les colonnes. Plus précisément le
data-sort
attribut. (Voir https://datatables.net/examples/advanced_init/html5-data-attributes.html)Je peux facilement les tables de tri de la sorte:
Il n'importe pas que l'Âge de la colonne contient tous les chiffres, les symboles et les lettres, les tables de données permettra de trier en utilisant les données-trier l'attribut.
data-sort=""
en vous html.Essayer un peu différents:
Mettre les deux colonnes de la table (je vais les appeler DateDisplay et DateSort), ne pas utiliser de fonction rendu et vient masquer le DateSort colonne. Puis, dans la aoColumns tableau de la colonne DateDisplay mettre
{ "iDataSort": 2 }
, où 2 est un indice de la DateSort colonne.Dans ce cas, DateDisplay colonne apparaît dans les données d'origine, et le filtre sera fait par cette colonne, mais le tri sera fait par les valeurs de la DateSort colonne.
Il y a plus de détails sur la iDataSort de propriété sur les tables de données du site ou dans le http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx la section"Configurer le tri".
Euh...au lieu de passer par tout ce charabia il suffit d'ajouter un caché
span
avec votre "Trier Par" à l'avant:Note: Cela signifie qu'ils peuvent effectuer une recherche par le masqués ou affichés en valeur...cela peut être une conséquence, vous ne pouvez pas vivre avec.
+1 JocaPC
Je voudrais ajouter à JocaPC réponse en rappelant à tous que le javascript utilise zéro-tableaux indexés.
Exemple:
Pour trier le champ de la date à l'aide de l'caché chaîne, vous utilisez la suite.
Car vous avez déjà vos données dans sortable et affichables format, c'est tout le code dont vous avez besoin.
Il utilisera
Date.Sort
pour le tri et laDate.Display
pour les visuels. Ceci est documenté ici.Pour ceux qui utilisent ajax source de données que vous pouvez utiliser Orthogonale de données. Par exemple, dans votre réponse ajax retour de l'une de vos colonnes comme un objet avec une valeur d'affichage et une sorte de valeur (similaire à ce que l'OP a):
Maintenant dans vos options de la table, vous pouvez utiliser
columns()
comme ceci:Vous devez trier la colonne par une colonne masquée (Tri). Pour cela, vous devez inclure une colonne qui contient les données de tri, de masquer la colonne et de trier l'Affichage de la Colonne par la colonne masquée.
Utiliser le
data-sort
l'attribut de la td, à l'instar de