[Résolu] Jquery-ui Tabs & Datatables

Bonjours tout le monde !

Je viens à l'aide pour un souci d'intégration/JS.

J'utilise : Jquery + Jquery-UI + Datatables. Bien entendu, je surcharge mon datatables avec mon thème Jquery-UI.

Jusque la, tout va bien -> Les tableaux prennent bien les styles Jquery-UI avec les fonctionnalité JS Datatables, et tout seul, mon Jquery-UI Tabs est bien pris en compte.

Là ou ça bloque, c'est lorsque j'utilise un Jquery-ui Tabs et qu'a l'intérieur de ces onglets je viens y mettre des Datatables... le tableau reste en forme HTML standard. Pourtant, une fois interprété, le code source de ma page appel bien ma classe pour le datatables

Pour la visualisation :

Le tabs avant :


Le tabs après ajout du style a mes tableaux :

Modifié par Thibow (19 Mar 2012 - 13:05)

salut je connais assez bien les deux pour les utiliser, mais jamais encore dans ce cas là

t'aurais pas un bout de code de l'intégration ??

il semblerait que le style de datatables surcharge ton style principal...

il doit donc y avoir une question d'ordre d'appel à régler

Plop,

Je reviens sur le poste avec la solution... Finalement, c'était pas un problème de surcharge pchlj ... Un oublie tout con ! Pour que le Datatable se mette en forme avec le thème Jquery UI, il est impératif de d'utiliser les tbody, thead et tfoot dans le <table>...

Pour l'exemple :

<div id="tabs">
    <ul>
        <li><a href="#tabs-contact">Contacts</a></li>
        <li><a href="#tabs-address">Adresses</a></li>
        <li><a href="#tabs-provider">Fournisseur</a></li>
    </ul>
    
    <div id="tabs-contact">
        <h3>Liste des contacts</h3>
        {$messageContact}
        <table id="table-contact" class="jquery-table">
            <thead>
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Email</th>
                <th>Telephone</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {foreach from=$partner->getContacts() item="contact"}
                {include file='index/_rowTableContact.tpl' contact=$contact partner=$partner}
            {/foreach}
            </tbody>
        </table>
        <div id="dialog_form_contact" title="Formulaire d'ajout de contact" class="dialog_box">
            <ul id="messageBoxContact"></ul>
            {$formContact}
        </div>
    </div>

Côté JS, c'est le classique...

ok, en effet...

Juste pour info, je peux savoir comment tu inclus les icônes ui dans la colonne action ??

Pour ma part je recréer des icônes, mais ça m’intéresse. Et peut être pas que moi d'ailleurs...


merci d'avance

Yop,

Rends toi sur le site du themroller Jquery UI > http://jqueryui.com/themeroller/

Au survol des boutons, leur noms t'es donné, (ui-icon-circle-plus / ui-icon-trash ...)

En JS, tu surcharge t'as classe :

    $(".button_trash").button({
        icons: {
            primary: "ui-icon-trash"
        },
        text : false
    }); 

Ainsi, tu vas utiliser l'icône poubelle lors de l'appel de la classe .button_trash

Reste plus qu'a mettre en place l'action du bouton toujours... (dans mon exemple, sa supprime directement la ligne du tableau Datatables sans avoir a recharger toute la page... )

    $(".button_trash").click(function(){
        var tr = $(this).parent("td").parent("tr");
        var id =getIdValue($(this).attr("id"));
        if (confirm("Etes-vous sûr de vouloir supprimer l'utilisateur ?")) {
            $.get(baseUrl+"/users/index/delete?id="+id, function(data){
                tr.remove();
                })
            }
        });

Merci

c'est vrai qu'avec ui déjà chargé c'est plus simple que je ne pensais

pour ton problème j'avoue que je n'aurais pas trouvé j'utilise datatables en server_side...

Bonjour Thibow, ça fait maintenant 2 jours que s'essaie d'integrer datatable dans mon application web mais sans succès. est-ce que tu peux me detailler ta reponse voir me poster comment tu intègre les differents fichiers .js (de jquery-ui tabs et jquery.datatables) car chez moi il y a conflit.
Merci