Filtrare dati in tabella con jQuery

[miki92]

Buonasera,
ho questa tabella:

<table><tr><th>data
</th><th>compagnia
</th><th>destinazione
</th><th>orario partenza
</th><th>orario stimato
</th><th>molo
</th><th>annotazioni




</th></tr><tr><td>22/07/2013</td>
                <td>CAREMAR</td>
                <td>Ischia</td>
                <td>21:05</td>
                <td>21:05</td>
                <td>-</td>
                <td>IMBARCO</td></tr><tr><td>22/07/2013</td>
                <td>CAREMAR</td>
                <td>Capri</td>
                <td>21:35</td>
                <td>21:35</td>
                <td>18</td>
                <td>Porta di Massa</td></tr><tr><td>22/07/2013</td>
                <td>CAREMAR</td>
                <td>Ischia</td>
                <td>21:55</td>
                <td>21:55</td>
                <td>18</td>
                <td>Porta di Massa</td></tr></table>

Avrei bisogno di filtrare, tramite una selectbox o due, i dati di questa tabella scegliendo tipo la compagnia, il tipo di nave (nome) o la destinazione. Sapete aiutarmi?

Ciao, secondo me la cosa migliore è quella di salvare tutti i dati della tabella in un array e poi effettuare il filtraggio dei dati direttamente sull'array. Poi visualizzi a schermo solo le righe della tabella selezionate.

Ti butto giù una bozza di codice, non l'ho testato.

$(document).ready(function() {

  var tableData = new Array()

  $('#my-table tr').each(function() {
    // Qui metto solo queste due informazioni, ma bisogna prendere tutti campi
    // per ogni riga
    company = $(this).find('td:eq(1)')
    destination = $(this).find('td:eq(2)')

    tableData.push({
      'company': company,
      'destination': destination
    })
  })

  // type può essere 'company' oppure 'destination'
  var filterData = function(type, value) {
    filtered = new Array();

    for(i in tableData) {
      if(
          (type == 'company' && tableData[i].company == value) ||
          (type == 'destination' && tableData[i].destination == value))
        filtered.push(tableData[i])
    }

    return filtered
  }

  var printFiltered = function(data) {
    // Ricostruisci la tabella con i dati filtrati che ti vengono passati come
    // parametro
  }

  $('#select-by-company').change(function() {
    data = filterData('company', $(this).val())
    printFiltered(data)
  })

  $('#select-by-destination').change(function() {
    data = filterData('destination', $(this).val())
    printFiltered(data)
  })

})

Questo codice gestisce solo eventi separati, cioè o filtri per compagnia o per destinazione. Se vuoi gestire entrambi i casi (quindi filtrare sia per compagnia che per destinazione) allora bisogna gestire la cosa in modo leggermente diverso (la sostanza non cambia però).

[miki92]

Ciao noktalk. Innanzitutto ti ringrazio per il tuo tempestivo aiuto...procedo con il postarti il codice completo della pagina così se magari riesci ad aiutarmi te ne sarei grato tantissimo.

http://pastebin.com/rFFmwKKb

Figurati ;)
Allora, ho visto il codice. Quello che ti ho postato io credo possa andare bene, l'unica cosa da capire è come vuoi effettuare il filtraggio, si riadatta il codice e credo che il problema sia risolto. Poi per la funzione printFiltered() è sufficiente svuotare la/le tabella/tabelle e aggiungere i dati filtrati.

[miki92]

Beh io vorrei scegliere o la compagnia o la destinazione. Nulla di più

Potrebbe essere d'aiuto questo?

Per un filtraggio rapido ed efficiente potresti usare la funzione filter di angularjs. Ovviamente però dovresti includere angularjs: http://docs.angularjs.org/api/ng.$filter

Se non volessi/potessi farlo, ecco la mia proposta con jquery:

Inserisci in un array ben organizzato tutti i tuoi dati. Crea una funzione che richiamata stampa la tabella prendendo i dati dall'array.

for(k in righe){
  ....
  compagnia = righe[k]["compagnia"];
  if(compagnia!=filter_compagnia && toFilter_compagnia){break;}
}

In filter_compagnia deve essere contenuto il termine da ricercare, es "CAREMAR" E toFilter_compagnia deve essere true se deve filtrare, false se non bisogna filtrare.

In questo modo ti basta richiamare la funzione di stampa ogni volta che cambia il valore dell'input contente il filtro.

Ovviamente puoi adattare questa funzione inserendo tanti controlli quanti vuoi (con rispettivi input e variabili filter_compagnia e toFilter_compagnia)

Se non ti è chiaro qualcosa, scrivi pure.

@miki92 allora credo che vada bene il codice che ti ho impostato. Se vuoi continuare ad usare quella bozza ti basta solo scrivere il codice per printFiltered e dovrebbe essere tutto ok. Altrimenti ho guardato velocemente il link di @simpleticket e sembra interessante quel plugin, anche se non lo conosco, ma sicuramente ti permette di raggiungere il risultato che vuoi ottenere con molto meno codice ;)

Per completezza, nel caso possa tornare utile a qualcuno, metto qui il codice che ha risolto il problema di @miki92.

$(document).ready(function() {

  var TableFilter = function(tableObject, fields) {

    this.table = tableObject
    this.fields = new Array()
    this.tableRows = new Array()
    this.lastFilteredData = new Array()

    this.init = function() {
      for(i in fields)
        this.addField(fields[i])

      tr = new Array()

      this.table.find('tr').each(function() {
        if($(this).find('th').size() == 0)
          tr.push($(this).clone())
      })

      this.tableRows = tr
    }

    this.addField = function(field) {
      elements = new Array()

      this.table.find('tr').each(function() {
        $(this).find('td:eq(' + field + ')').each(function() {
          txt = $(this).text()

          if(elements.indexOf(txt) == -1)
            elements.push(txt)
        })
      })

      this.fields.push({
        'id': field,
        'caption': this.table.find('th:eq(' + field + ')').text().trim(),
        'elements': elements
      })
    }

    this.assignSelect = function(fieldCaption, selectObj) {
      index = undefined

      for(i in this.fields)
        if(this.fields[i].caption.toLowerCase() == fieldCaption.toLowerCase())
          index = i

      for(i in this.fields[index].elements)
        selectObj.append('<option value="' + this.fields[index].elements[i] + '">' + this.fields[index].elements[i] + '</option>')

      this.fields[index].select = selectObj
      selectObj.data('field-id', this.fields[index].id)
    }

    this.setFilterEvents = function() {
      for(i in this.fields) {
        this.fields[i].select.on('change', {tClass: this}, function(event) {
          if(event.data.tClass.lastFilteredData.length > 0)
            source = event.data.tClass.lastFilteredData
          else
            source = event.data.tClass.tableRows

          result = new Array()

          for(j in source)
            if(source[j].find('td:eq(' + $(this).data('field-id') + ')').text().trim() == $(this).val().trim())
              result.push(source[j].clone())

          event.data.tClass.updateTable(result)
          event.data.tClass.lastFilteredData = result
        })
      }
    }

    this.updateTable = function(rows) {
      this.table.empty()

      this.table.append('<tr><th>data</th><th>compagnia</th><th>destinazione</th><th>orario partenza</th><th>orario stimato</th><th>molo</th><th>annotazioni</th></tr>')
      this.table.append(rows)
    }

    this.resetTable = function() {
      this.updateTable(this.tableRows)
      this.lastFiltered = new Array()
    }

    this.init()

  }

  $('#select-by-destination').append('<option>Destinazione</option>')
  $('#select-by-company').append('<option>Compagnia</option>')

  // 1 ==> Compagnia
  // 2 ==> Destinazione
  tabf = new TableFilter($('table:first'), [1, 2])

  tabf.assignSelect('Compagnia', $('#select-by-company'))
  tabf.assignSelect('Destinazione', $('#select-by-destination'))
  tabf.setFilterEvents()

  $('#reset-table').on('click', {tf: tabf}, function(event) {
    event.data.tf.resetTable()
  })

})