Utilisation du plugin Flexigrid pour jQuery sur une table HTML, pas sur un fichier XML

J'essaie d'utiliser le plugin Flexigrid pour jQuery qui semble parfait pour ce que l'on me demande de faire.Utilisation du plugin Flexigrid pour jQuery sur une table HTML, pas sur un fichier XML

Maintenant, ce que je travaille avec un tableau HTML, et je n'ai pas la possibilité de le changer. Le site ci-dessus a trois exemples. Les deux premiers semblent appliquer le Flexgrid aux tables existantes, ce dont j'ai besoin, mais ils n'ont pas l'option de tri.

Ce code est donné pour la première:

$('.flexme').flexigrid();

avec l'être de table HTML:

<table class="flexme"> 
    <thead> 
      <tr> 
       <th width="100">Col 1</th> 
       <th width="100">Col 2</th> 
       <th width="100">Col 3 is a long header name</th> 
       <th width="300">Col 4</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <td>This is data 1 with overflowing content</td> 
       <td>This is data 2</td> 
       <td>This is data 3</td> 
       <td>This is data 4</td> 
      </tr> 

    </tbody> 
</table>

Et je pensais que je pourrais simplement ajouter ce qui suit:

{sortable : true}

, se terminant par:

$('.flexme').flexigrid({sortable : true});

Mais cela ne fonctionne pas.

Comment est-ce que je peux faire ceci?

Source

2010-10-05 George

Après avoir creusé, j'ai trouvé et utiliser une bibliothèque supplémentaire JS nommé: jquery.tablesorter que vous pouvez trouver ici: http://tablesorter.com/

Il travaille ensuite avec Flexigrid sur une manière transparente. Je n'ai pas testé toutes les possibilités, mais cela semble fonctionner pour le tri basique.

Voici mon exemple de code. Vous devrez modifier le chemin d'accès aux différentes bibliothèques

<html> 
<head> 
<title>Channels List</title> 

<link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid.pack.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="flexigrid/js/flexigrid.pack.js"></script> 
<script type="text/javascript" src="tablesorter/jquery.tablesorter.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $("#MyTable1").tablesorter(); 
    } 
); 
</script> 
</head> 

<body> 

<br><b><u>Channels List</b></u><br> 
<table id='MyTable1' class="flexme"> 
    <thead> 
      <tr> 
       <th width="100">Col1</th> 
       <th width="100">Col2</th> 
       <th width="100">Col3</th> 
       <th width="300">Col4</th> 
      </tr> 

    </thead> 
    <tbody> 
      <tr> 
       <td>This is data 1a</td> 
       <td>This is data 2a</td> 
       <td>This is data 3a</td> 
       <td>This is data 4a</td> 
      </tr> 
      <tr> 
       <td>This is data 1b</td> 
       <td>This is data 2b</td> 
       <td>This is data 3b</td> 
       <td>This is data 4b</td> 
      </tr> 
      <tr> 
       <td>This is data 1c</td> 
       <td>This is data 2c</td> 
       <td>This is data 3c</td> 
       <td>This is data 4c</td> 
      </tr> 
      <tr> 
       <td>This is data 1d</td> 
       <td>This is data 2d</td> 
       <td>This is data 3d</td> 
       <td>This is data 4d</td> 
      </tr> 

    </tbody> 
</table> 

    <script type="text/javascript"> 
     $('.flexme').flexigrid({ 
     title: 'This is a my test', 
     height:150,striped:false, 
     } 
     ); 
    </script> 

</body> 
</html>

Source

2013-07-24 08:31:53 Ydakilux

Utilisation du plugin Flexigrid pour jQuery sur une table HTML, pas sur un fichier XML

Répondre

Questions connexes