IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Utilisation de DataTables avec Jquery UI


Sujet :

jQuery

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Janvier 2012
    Messages : 49
    Points : 38
    Points
    38
    Par défaut Utilisation de DataTables avec Jquery UI
    Bonjour à tous,

    J'utilise DataTables depuis quelques temps et j'essaie en ce moment de le coupler avec JQuery UI. Je rencontre un problème quand je fais appel à la pagination de DataTables, quand je passe à la page n°2 de mes résultats, je perds le JQuery UI et mes bouton radio prennent l'aspect par défaut de HTML.
    Je n'arrive pas à relancer JQ UI proprement pour chaque pagination.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
     
    $(document).ready(function() {
             var myDT = $('#tableGroup').DataTable({
                "lengthChange": false,
                "pageLength": 8,
                "pagingType": "input",
                "data": <?php echo json_encode($this->listeApplis); ?>,
                "columns": [
                    {"data": "AppliName"},
                    {"data": null}
                ],
                "columnDefs": [
                    {
                        "targets": -1,
                        "orderable": false,
                        "searchable": false,
                        "render": function (data, type, row) {
                            var rId = randomId();
                            return '<label for="' + rId + '">Sélection</label>' +
                                '<input id="' + rId + '" class="stdRadio rSlct" name="AppliDN" type="radio"' +
                                ' value="' + row.AppliDN + '">' +
                                '<input name="AppliName" type="hidden" value="' + row.AppliName + '" >';
                        }
                    }
                ],
                "drawCallback": function (settings) {
    /* Pour déselctionner les boutons radio si je passe à une autre page */
                    $("#" + rID + "").prop('checked', false);
                 },
                language: {
                    processing: "Traitement en cours...",
                    search: "Filtrer&nbsp;:",
                    lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                    info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucune donnée disponible dans le tableau",
                    paginate: {
                        first: "<<",
                        previous: "<",
                        next: ">",
                        last: ">>"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                }
            });
            $('.stdRadio').checkboxradio();
     
            $(".paginate_button").click(function () {
                $('.rSlct').checkboxradio();
            });
        });
    En plus, quand j'utilise la pagination et que je sélectionne un autre radio bouton le premier reste coché, ce qui ne devrait pas être possible avec des radio.

    Savez-vous comment éviter ce problème?

    Merci

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    pas regardé en plein ton code mais j'ai quand même observé que tu utilisais rId et rID !?!

Discussions similaires

  1. Utilisation de D3js avec jquery et ajax
    Par hack224 dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 05/03/2016, 10h49
  2. Réponses: 6
    Dernier message: 14/10/2010, 09h28
  3. Réponses: 5
    Dernier message: 30/11/2009, 16h20
  4. utilisation asyncrone avec jQuery
    Par bucheron007 dans le forum APIs Google
    Réponses: 1
    Dernier message: 29/04/2009, 00h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo