attribut de données pour (Mottie) tablesorter filter_selectSource

Question

J'ai une table dynamique qui peut contenir une colonne status qui peut contenir une liste prédéfinie de statut, par exemple:

0: closed 
1: Open 
2: Pending 
3: ... 

L'étiquette d'état est affiché dans le tableau, mais le numéro id est utilisé pour le filtrage réel. J'ai appliqué avec succès le tablesorter filter-select pour afficher un filtre de sélection, mais soit afficher l'étiquette (ne filtre pas) ou id (pas joli).

je pourrais résoudre ce problème en utilisant l'intérieur filter_selectSource javascript, mais depuis ma table est dynamique et affiché à l'aide guidon, je suis à la recherche d'une solution HTML en utilisant les attributs de données.

Existe-t-il un attribut de données pouvant être utilisé pour définir l'étiquette/la valeur de sélection de filtre, similaire à la façon dont data-text peut être utilisé pour définir un texte non analysé? Ou existe-t-il un moyen de définir un analyseur personnalisé pour le filtre qui retournerait un combo label/valeur en tant que tableau par exemple?

Answer 1

Sur la base de réponse Mottie et tablesorter.filter.getOptions la source, je suis venu avec cela. L'ajout de la classe à mes colonnes th permet d'utiliser l'attribut data-value dans la cellule td comme options de sélection. Le texte analysé/non analysé peut toujours être utilisé. Notez que la partie enfant de getOptions a été omise car je n'utilise pas de fonctionnalité pour le moment.

Tableau Cell:

<td data-value="1"> 
    Projet actif 
</td> 

Sélectionnez l'option:

<option value="1" parsed="projet actif" data-function-name="1">Projet actif</option> 

Javascript:

filter_selectSource: { 
    ".filter-metaselect": function (table, column, onlyAvail) { 
     table = $(table)[0]; 
     var rowIndex, tbodyIndex, len, row, cache, indx, child, childLen, colData, 
      c = table.config, 
      wo = c.widgetOptions, 
      arry = []; 
     for (tbodyIndex = 0; tbodyIndex < c.$tbodies.length; tbodyIndex++) { 
      cache = c.cache[tbodyIndex]; 
      len = c.cache[tbodyIndex].normalized.length; 
      // loop through the rows 
      for (rowIndex = 0; rowIndex < len; rowIndex++) { 
       // get cached row from cache.row (old) or row data object 
       // (new; last item in normalized array) 
       row = cache.row ? 
        cache.row[ rowIndex ] : 
        cache.normalized[ rowIndex ][ c.columns ].$row[0]; 
       // check if has class filtered 
       if (onlyAvail && row.className.match(wo.filter_filteredRow)) { 
        continue; 
       } 

       // Get the column data attributes 
       if (row.getElementsByTagName('td')[column].getAttribute('data-value')) { 
        colData = row.getElementsByTagName('td')[column].getAttribute('data-value'); 
       } else { 
        colData = false; 
       } 

       // get non-normalized cell content 
       if (wo.filter_useParsedData || 
        c.parsers[column].parsed || 
        c.$headerIndexed[column].hasClass('filter-parsed')) { 

        arry[ arry.length ] = { 
         value : (colData) ? colData : cache.normalized[ rowIndex ][ column ], 
         text : cache.normalized[ rowIndex ][ column ] 
        }; 

        // child row parsed data 
        /* TODO */ 
       } else { 

        arry[ arry.length ] = { 
         value : (colData) ? colData : cache.normalized[ rowIndex ][ c.columns ].raw[ column ], 
         text : cache.normalized[ rowIndex ][ c.columns ].raw[ column ] 
        }; 

        // child row unparsed data 
        /* TODO */ 
       } 
      } 
     } 

     // Remove duplicates in `arry` since using an array of objects 
     // won't do it automatically 
     var arr = {}; 

     for (var i=0, len=arry.length; i < len; i++) 
      arr[arry[i]['text']] = arry[i]; 

     arry = new Array(); 
     for (var key in arr) 
      arry.push(arr[key]); 

     return arry; 
    } 
} 

Answer 2

Le filter_selectSource documentation a un exemple où cette option de widget appelle le filter.getOptions qui renvoie un tableau de texte de cellule ou des valeurs analysées (en fonction du paramètre de l'analyseur de filtre); Si cela ne renvoie pas les valeurs souhaitées, récupérez vous-même les valeurs et renvoyez un tableau dans cette fonction.

Voici un exemple de base de la façon de l'utiliser: http://jsfiddle.net/Mottie/856bzzeL/117/ (lié à Is there a way in tablesorter to filter to select only rows where the field is empty?)

$(function(){ 
    $('table').tablesorter({ 
     theme: 'blue', 
     widgets: ['zebra', 'filter'], 
     widgetOptions: { 
      filter_functions: { 
       0: { 
        '{empty}' : function (e, n, f, i, $r, c) { 
         return $.trim(e) === ''; 
        } 
       } 
      }, 
      filter_selectSource: { 
       0: function (table, column, onlyAvail) { 
        // get an array of all table cell contents for a table column 
        var array = $.tablesorter.filter.getOptions(table, column, onlyAvail); 
        // manipulate the array as desired, then return it 
        array.push('{empty}'); 
        return array; 
       } 
      } 
     } 
    }); 

});