ajax et tablesorter

julesMartin
Javascript

je débute en ajax et javascript et je rencontre un problème de trie sur un tableau appelé via ajax. Pour trier mes tableau j'utilise le plugin jQuery tablesorter.
Info complémentaire, j'utilise le composant "tab" de bootstrap pour afficher mes tableaux et c'est pour cette raison que je fais appel a l'ajax car les paramètre transmis dans l'url ne sont pas pris en compte par ce composant.
Au click sur une tab

pour appeler mon tableau j'utilise le script ci dessous qui est appelé au moment du click sur une des tab :

[code]
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');

        $.get(loadurl, function(data) {
            $(targ).html(data);
        });

        $this.tab('show');
        return false;
    });

[/code]

Le script tablesorter :

[code]
$(function(){
$('table').tablesorter({
widgets : ['zebra', 'columns'],
usNumberFormat : false,
sortReset : true,
sortRestart : true
});
});
[/code]

Je précise que le trie fonctionne très bien quand je ne passe pas par l'ajax. J'ai l'impression qu'il faut que j'appelle ma fonction de trie dans mon script mais je ne sais pas ou est comment.
Peut être existe t'il un moyen plus simple.

Merci d'avance si quelqu'un peut se pencher sur mon probleme

21 réponses

saibe
Réponse acceptée

ok, j'avais pas vu le toggle :) d'où ajax...
je ferais un truc du genre :
html :

<a class="active changeTab" data-tab="tab1.php">tab1</a>
<a class="changeTab" data-tab="tab2.php">tab2</a>

<div class="tabContent"></div>

js :

// pour faire l'appel ajax
function loadTab(url){
     $.ajax({
        url :  url,
        success : function(response){
            $('.tabContent').html(response);
            $('table').tablesorter(); // avec les options que tu veux
        }
    });
}

// le click sur les changeTab
$('.changeTab').click(function(){
    if($(this).hasClass('active')) return; // c déjà ce tableau
    $('.changeTab').removeClass('active');
    $(this).addClass('active');
    loadTab($(this).attr('data-tab'));   
});

// on charge le tab1
loadTab('tab1.php');

ensuite au niveau du php, si, comme dans ton premier exemple tu génères du html t'as besoin de rien,
mais si tu te fais une var $html, pas besoin de json_encode, un echo $html suffit...

Pominus

salut j'ai du mal à comprendre pourquoi tu utilise de l'AJAX tu pourrais réexplique ton utilisation de cette méthode s'il te plais ?

julesMartin
Auteur

Je me doutais bien que c'etait pas trés clair et qu'il y a surement une solution plus optimal.
J'utilise le compsant tab pour afficher des tableaux dans chaque tab. Mon probléme c'est que ces tableaux sont generés dynamiquement depuis mysql avec des parametres d'envois
Quand j'intégre ces paramétres dans l'ancre du href, il ne semble pas pris en compte lors du clic sur les tab et je me retrouve avec un page vide.
ex : <li class='active'><a data-toggle='tab' href='page.php?val1=val#contacts'>Partant</a></li>

C'est pour ca que je passe par l'ajax avec le script que j'ai trouvé, qui le permet. Ca fonctionne mais malheuresement le tablesorter n'est pas pris en compte et je n'ai pas la fonction de trie sur mes tableaux.

Si tu as une solution plus simple, je suis preneur.
Peut etre qu'il y a plus simple avec le data-target du tab mais je ne sais pas comment.

julesMartin
Auteur

Pardon, voici l'exemple

<li class='active'><a data-toggle='tab' href='page.php?val1=val#contacts'>Contacts</a></li>
Pominus

Alors t'es tableaux sont générer à partir d'une base de donnée tu passe part un autre language type Php ou ruby etc ... ? ton ajax comunique avec un de c'est language pour "rafraichir" une partie de la page sans devoir tout rafraichir ( c'est pour ça qu'on utilise de l'AJAX en general )

Du coup qu'elle language tu utilise de l'autre coté ( coté serveur ) ?

Pour un changement avec un AJAX fait avec Jquery comme tu fait le DATA contien normalement t'es données que tu fait transité du coup tu aurait normalement pas besoin d'un href pour récuperer t'es donnée juste si tu utilise php un json_encode te renvoi les données dans le Data de ta fonction ajax

Enfin tout ce que je viens de dire tiens compte que si j'ai bien compris ta problèmatique ^^'

julesMartin
Auteur

J'utilise php coté serveur. Je comprend bien ton raisonement puisque en effet d'habitude c'est comme ca que je raisonne. Tu as raison sur le fait que je n'ai pas besoin d'utiliser href mais a la limite c'est pas trop grave car je lis bien receptionne bien le contenu avec DATA. Mon probleme c'est qu'ensuite l'activation des trie sur les tableaux ne se fait pas avec mon script tablesorter.

Script tablesorter

 <script>
    $(function(){
        $('table').tablesorter({
            widgets        : ['zebra', 'columns'],
            usNumberFormat : false,
            sortReset      : true,
            sortRestart    : true
        });
    });
    </script>

J'arrive pas a etre suffisament clair car je ne maitrise pas encore le js et ajax.
J'esperer que tu vois un peu plus ou se situe mon probleme

Pominus

si tu veut que cela s'exécute dans ton ajax il suffit de nommé t'as fonction et l'apeller dans le ajax comme ça 

        $(function trietableaux(){
            $('table').tablesorter({
                widgets        : ['zebra', 'columns'],
                usNumberFormat : false,
                sortReset      : true,
                sortRestart    : true
            });
        });

        $.get(loadurl, function(data) {
            $(targ).html(data);
            trietableaux();
        });

La le code s'éxécute après ton ajax ^^ donc après la création de t'es tableaux

Pominus

après je sais pas si je suis claire ta function se lance seulement au LOAD de t'as page donc se que je t'explique permet de le lancer quand t'es tableaux sont crée ^^

julesMartin
Auteur

Completement logique. Du coup j'ai essayé de mettre en ouevre ta solution mais ca ne fonctionne pas. Pourtant je suis certain que tu as raison et que la soltion n'est pas loin.

J'ai simplifier au maximum mon code. Plus de mysql, un simple tableau.
Dans le tab classique le trie fonctionne et dans le tab ajax non.
Il doit manquer grand chose. Peut etre un probleme de positionnement de mes scripts. J'ai essayé dans tous les sens mais ca veut pas.

Au cas ou voici le code simplifier, ca va peut etre te sauter au yeux.


<!DOCTYPE html>
<html  lang="en">
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="">
    <title>Test</title>

    <!-- Links -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/tableau/theme.blue.css" rel="stylesheet">
    <link rel="stylesheet" href="css/cssTab.css">

    <!--JS-->
    <script src="js/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery.tablesorter.min.js"></script>
    <script src="js/jquery.tablesorter.widgets.min.js"></script>

<script>
    $(function(){
        $('table').tablesorter({
            widgets        : ['zebra', 'columns'],
            usNumberFormat : false,
            sortReset      : true,
            sortRestart    : true
        });
    });
</script>
</head>

<body>

    <ul class="nav nav-tabs tabs-up" id="test">
        <li class='active'><a data-toggle='tab' href='#tab1'>TAB1</a></li>
        <li><a href="tab1.php" data-target="#tab2" class="media_node span" id="tab2_tab" data-toggle="tabajax" rel="tooltip">TAB2</a></li>

    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
        <h3>Test trie tableau Ajax</h3>
            <div class='table-responsive'>
                    <table class='table tablesorter-blue table-bordered table-condensed table-body-center' >

                    <thead>
                        <tr>
                            <th scope='col'>N°</th>
                            <th scope='col'>DATA</th>
                        </tr>
                    </thead>

                        <tr>
                            <td>1</td>
                            <td>Un</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Deux</td>
                        </tr>

                </table>
            </div>
        </div>
        <div class="tab-pane" id="tab2">

        </div>

    </div>

    <script>
        $(function trietableaux(){
                    $('table2').tablesorter({
                        widgets        : ['zebra', 'columns'],
                        usNumberFormat : false,
                        sortReset      : true,
                        sortRestart    : true
                    });
                }); 

        $('[data-toggle="tabajax"]').click(function(e) {
            var $this = $(this),
                loadurl = $this.attr('href'),
                targ = $this.attr('data-target');

            $.get(loadurl, function(data) {
                $(targ).html(data);
                trietableaux();
            });

            $this.tab('show');
            return false;
        });
    </script>

    </body>
</html>

page php appellé par l'ajax (tab1.php)

<div class='table-responsive'>
<table class='table2 tablesorter-blue table-bordered table-condensed table-body-center' >
    <thead>
        <tr>
            <th scope='col'>N°</th>
            <th scope='col'>DATA</th>
        </tr>
    </thead>

        <tr>
            <td>1</td>
            <td>Un</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Deux</td>
        </tr>

</table></div>

En esperant que tu vois quelques choses !

Pominus

il manque un json_encode() du coté php et de plus tu fait deux fois ton trie sur le tableux regarde tu a une roondance de code ^^' tu peu suprimé ton script en haut ^^ du coup tu aurait qu'un seul script avec 

$(function trietableaux(){
                    $('table2').tablesorter({
                        widgets        : ['zebra', 'columns'],
                        usNumberFormat : false,
                        sortReset      : true,
                        sortRestart    : true
                    });
                }); 

        $('[data-toggle="tabajax"]').click(function(e) {
            var $this = $(this),
                loadurl = $this.attr('href'),
                targ = $this.attr('data-target');

            $.get(loadurl, function(data) {
                $(targ).html(data);
                trietableaux();
            });

            $this.tab('show');
            return false;
        });
Pominus

je t'envoi un exemple de jquery en Post
Coté JS ( perso je m'envoi toujours une verif même si sa sécurise rien sa me permet de "tracer" la données)

$.post('Page.php',{
            verif : 'data'
            } ,function(data){
               //truc a effectuer en JS
            });

Coté php

If ($_POST["verif"] == 'data') {
    //blabla php 
    $data = //résulta du blabla php

    //je renvoie la données
    json_encode($data);
}
julesMartin
Auteur

Je vois ou tu veux en venir mais je ne sais pas ou placer le "$.post('Page.php',{...."
Est ce que dans truc a effectuer en js je place ce code :

$('[data-toggle="tabajax"]').click(function(e) {
            var $this = $(this),
                loadurl = $this.attr('href'),
                targ = $this.attr('data-target');

            $.get(loadurl, function(data) {
                $(targ).html(data);
                trietableaux();
            });

            $this.tab('show');
            return false;
        });

Désolé je cale mais je suis vraiment debutant en ajax.

Pominus

Pas de soucis sa fait peur la premiere fois xD bha ton code est bon tu GET au lieu de POST mais c'est la même chose je pense que c'est coté PHP que sa va pas enfaite ^^' tu peu m'envoyé ton code PHP complet ?

julesMartin
Auteur

C'est vrai que c'est un peu cho au debut !
Voici le code de ma page php :

<?php
$data="<div class='table-responsive'>
<table class='table2 tablesorter-blue table-bordered table-condensed table-body-center' >
    <thead>
        <tr>
            <th scope='col'>N°</th>
            <th scope='col'>DATA</th>
        </tr>
    </thead>

        <tr>
            <td>1</td>
            <td>Un</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Deux</td>
        </tr>

</table></div>";

json_encode($data);

?>
julesMartin
Auteur

Ton approche est super interressante. C'est exactement ce que je cherche.
Par contre je sais pas pourquoi le changeTab ne fonctionne pas. Quand je clic sur tab2 rien ne se passe.
le loadTab('tab1.php'); charge bien ma page tab1.php et le trie fonctionne.

c'est vraiment pas loin. Il doit pas manquer grand chose.

julesMartin
Auteur

Et pourtant le TAB2 passe bien en mode 'active'.
on dirait que ca se situe plus au niveau de loadTab($(this).attr('data-tab'));

julesMartin
Auteur

Ca marche nickel Saibe. C'est mon script qui etait mal placé.
D'ailleurs a quel moment on doit mettre ses scripts dans le head et invensement a la fin du body ?

Merci beaucoup c'est top

saibe

;) content d'avoir pu t'aider,
si tu veux être plus propre (ce qui ne veux pas dire plus efficace :)) et mettre ton js en fichier ext tu peux faire ça :

// ce qui va ce lancer quand ton dom est pret
$().ready(function(){
  // le click sur les changeTab
  $('.changeTab').click(function(){
      if($(this).hasClass('active')) return; // c déjà ce tableau
      $('.changeTab').removeClass('active');
      $(this).addClass('active');
      loadTab($(this).attr('data-tab'));   
  });

    // et le ti update :)
    // on charge le tab active
   loadTab($('.changeTab.active').attr('data-tab'));
});

// pour faire l'appel ajax
function loadTab(url){
     $.ajax({
        url :  url,
        success : function(response){
            $('.tabContent').html(response);
            $('table').tablesorter(); // avec les options que tu veux
        }
    });
}

++

saibe

perso j'utilise un excellent plungin table :
dataTable, très utile si tu as des milliers d'entrées, car il peut se "remplir" en ajax :)

julesMartin
Auteur

Je vais faire ca c'est plus propre.
Intéressant ce plugin je vais regarder ca de plus près ;)

saibe

hello,
après je connais pas tes tab1.php et tab2.php mais tu peux peut-être faire qqc de plus 'sympa' et ''sécurisé", et générer tes tabs dynamiquement avec un seul fichier php en rajoutant des infos à ton ajax....
bon, je m'embale un peu... tu m'arrêtes si t comblé ;)