2016-10-31 1 views
1

J'ai implémenté une table responsive à l'aide de la bibliothèque jquery footable. Maintenant j'ai placé des étiquettes d'entrée, sélectionnez la boîte dedans. Footable js supprime toutes ces balises et en fait un <td> vide.footable js supprime tous les éléments de formulaire dans la table

<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false"> 
    <thead> 
    <tr> 
     <th></th> 
     <th data-breakpoints="xs">Date Created</th> 
     <th>Source</th> 
     <th>Type</th> 
     <th data-breakpoints="xs">Status</th> 
     <th data-breakpoints="xs sm">&nbsp;</th> 
     <th data-breakpoints="xs sm md" >&nbsp;</th> 
     <th data-breakpoints="xs sm md">&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr data-expanded="true"> 
     <td></td> 
     <td>6/11/16</td> 
     <td>Mr. Cooper - Request Info</td> 
     <td>Buying</td> 
     <td> 
      <select class="nobrdr"> 
       <option>Offer</option> 
      </select> 
     </td> 
     <td><input type="text" class="nobrdr" placeholder="Value"/></td> 
     <td><input type="text" class="nobrdr" placeholder="Date" /></td> 
     <td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td> 
    </tr> 

    </tbody> 
</table> 

fonction jquery:

$(function($){ 
      $('#accordion-example-1,#accordion-example-2').footable({ 

      }); 
     }); 
+0

Remarque: Footable JS cache certaines colonnes de données à différentes résolutions (appelons ces points d'arrêt). Les lignes deviennent extensibles pour révéler toutes les données cachées. Si simple! Toutes les données cachées peuvent toujours être vues simplement en cliquant sur la ligne. – rJ7

Répondre

1

Vous devez changer le type de données de la colonne (s) où les éléments de formulaire sont "html", sinon FooTable suppose la colonne contient seulement le texte et le formate en tant que tel - c'est-à-dire qu'il supprimera tout le balisage HTML du contenu de la cellule, et pas seulement les éléments de formulaire.

Par exemple, dans votre cas:

<th data-type="html" data-breakpoints="xs">Status</th> 

lui dira de respecter le balisage HTML dans toutes les cellules dans la colonne État.

Les types de colonne possibles pris en charge sont "text", "number", "html" et "date". "text" est la valeur par défaut si aucun type n'est spécifié.

Pour une discussion plus détaillée, je vous suggère de lire le guide au http://fooplugins.github.io/FooTable/docs/getting-started.html et de trouver la section "Options de colonne".