Tablas anidadas jQuery Tablesorter, todas clasificables

Estoy tratando de obtener el plugin jQuery Tablesorter para trabajar con tablas anidadas, donde las tablas internas y externas son ordenables. Cada fila de la tabla externa normalmente contiene un botón que, al hacer clic, revela una tabla interna oculta en la fila justo debajo (aunque he omitido el botón en el HTML a continuación para simplificar, haciendo que todo sea visible inicialmente).Tablas anidadas jQuery Tablesorter, todas clasificables

La tabla interna está en una fila con una clase de "expand-child", que le dice a Tablesorter que lo mantenga con la fila justo encima cuando se lo ordena. Esto funciona principalmente, pero los encabezados de la tabla externa no se resaltan correctamente cuando se hace clic, y la tabla interna no ordena en absoluto.

Conozco this SO question, y esa solución es desactivar la ordenación en la tabla interna, pero específicamente quiero que las tablas externa e interna puedan clasificarse.

Mi HTML está debajo, y también he creado un jsfiddle que muestra el problema. Gracias por cualquier ayuda.

<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th>Make</th> 
      <th>Model</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Honda</td> 
      <td>Accord</td> 
     </tr> 
     <tr class="expand-child"> 
      <td colspan="2" style="padding: 0 30px 0 30px;"> 
       <table class="tablesorter"> 
        <thead> 
         <tr> 
          <th>Doors</th> 
          <th>Colors</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>Honda 2-Door</td> 
          <td>Honda Red</td> 
         </tr> 
         <tr> 
          <td>Honda 4-Door</td> 
          <td>Honda Blue</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td>Toyota</td> 
      <td>Camry</td> 
     </tr> 
     <tr class="expand-child"> 
      <td colspan="2" style="padding: 0 30px 0 30px;"> 
       <table class="tablesorter"> 
        <thead> 
         <tr> 
          <th>Doors</th> 
          <th>Colors</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>Toyota 2-Door</td> 
          <td>Toyota Yellow</td> 
         </tr> 
         <tr> 
          <td>Toyota 4-Door</td> 
          <td>Toyota Green</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

Fuente

2012-02-26 Russell G

He bifurcada su jsFiddle y actualizado con los selectores de modo que se ordene como creo que lo quieres ... http://jsfiddle.net/P2DsY/

Se puede ver en mi tenedor que sólo necesitaba ser específico con la tabla configuración de plugin de clasificador.

Fuente

2012-02-26 07:28:26

Perfecto, gracias! Después de jugar un poco con su jsfiddle, veo que el único cambio que realmente se necesita es agregar el parámetro de selector de tablas {selectorHeaders: '> thead> tr> th'}. El valor predeterminado es 'thead th', que me doy cuenta que ahora causa un problema porque la tabla externa también termina seleccionando elementos en las tablas internas. Los signos> solo lo hacen mirar a sus hijos directos, no a todos los descendientes. Me pregunto si el tuyo debería ser el valor predeterminado del conjunto de tablas. De todos modos, gracias de nuevo! –

Me encontré con otro problema con esto más tarde cuando traté de deshabilitar la clasificación en el encabezado de la primera columna. Si agrega "encabezados: {0: {sorter: falso}}", deshabilita la primera columna de todas las tablas, incluso las anidadas. Para deshabilitarlos individualmente, en su lugar agregue metadatos en línea al elemento : class = "{sorter: false}" (e incluya jquery.metadata.js, como dicen los doctores de tablesorter). –

¿Cambió algo? Cuando hago clic en los encabezados de la tabla en su violín, no mantiene la relación padre-hijo. –

Tablas anidadas jQuery Tablesorter, todas clasificables

Respuesta

Cuestiones relacionadas