jQuery Datatables DOM positionnement pour les Boutons

Je viens de mettre mon jQuery Datatables version 1.10. Et puis j'ai essayé d'enlever sa retraite plugin comme "Colvis" et "Tabletools" avec le "Bouton" de l'extension. Tout fonctionne très bien ici.

Mais le problème pour moi, je ne pouvais pas en mesure de séparer les "Colvis" bouton à partir de la "Tabletool" boutons.

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>B",
    "buttons": [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',     
        {
            extend: 'colvis',
            postfixButtons: [ 'colvisRestore' ],
            columns: '0,1,2,3,4,5,6'
        }
    ],
    language: {
        buttons: {
            colvis: 'Change columns'
        }
    }

Où dans la "sodome", la lettre "B" désigne pour les Boutons. Alors je suis tous les quatre Boutons (Texte, Excel, CSV et Colvis) en une seule ligne. Mais j'ai besoin de la "Colvis" pour être séparé de (Copie, Excel et CSV).

Donc Est-il possible d'ajouter un bouton près de la zone de recherche et un autre près de la pagination?

OU

Est là toute la configuration est disponible dans le "sDom" ou dans le "Bouton"?

Merci!

OriginalL'auteur Raja | 2015-12-22

  1. 10

    Vous ajoutez de nouveaux éléments pour les tables de données du dom de commandes à l'aide <'.class'> ou <'#id'>. Exemple, insérer une nouvelle <div id="colvis"> élément à gauche de la pagination, <'#colvis'> avant p :

    "sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"

    colvis boutons a la classe .buttons-colvis, si vous déplacer de façon permanente à la injecté #colvis élément par :

    $('.buttons-colvis').detach().appendTo('#colvis')

    C'est le moyen rapide de se déplacer à la colvis bouton à un autre emplacement.

    En matière de @GreeKatrina de la suggestion, oui - mais le placement correct de la méthode est :

    var colvis = new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            ... 
        }
   ]
})
colvis.container().appendTo('#colvis')

    si vous avez un #colvis élément de cours.

    Ma recommandation :
    Outre l'codé en dur solution, où vous ciblez le colvis boutons spécifiquement, vous pourriez monkey patch dataTables boutons chaque étendu bouton peut avoir un container option. Après l'initialisation, le bouton est déplacé à l' container :

    var org_buildButton = $.fn.DataTable.Buttons.prototype._buildButton;
$.fn.DataTable.Buttons.prototype._buildButton = function(config, collectionButton) {
   var button = org_buildButton.apply(this, arguments);
   $(document).one('init.dt', function(e, settings, json) {
       if (config.container && $(config.container).length) {
          $(button.inserter[0]).detach().appendTo(config.container)
       }
   })    
   return button;
}

    utiliser le container option :

    {
   extend: 'colvis',
   postfixButtons: [ 'colvisRestore' ],
   container : '#colvis', //<---
   columns: '0,1,2,3,4,5'
}

    démo -> http://jsfiddle.net/v4bLv83h/

    Comme le montre l'exemple, vous pouvez maintenant spécifier un autre conteneur pour chaque bouton. Notez que container peut être n'importe quel élément, il n'a pas à être un élément injecté par dom. Notez aussi (comme vous pouvez le remarquer dans le violon) que vous avez besoin de faire un peu de style si vous voulez faire injecté éléments de circuler correctement avec le natif d'éléments de contrôle, telles que la pagination à bloc.

    OriginalL'auteur davidkonrad

  2. 3

    Je ne suis pas un expert avec les tableaux de données de la bibliothèque, mais le la documentation dit que vous pouvez avoir plusieurs collections de boutons et insérez-les séparément. Il a aussi un exemple pour plusieurs groupes de boutons que vous pouvez utiliser au lieu de mettre "B" plusieurs fois dans la dom option, je ne pense pas valide.

    Combinant les exemples de la documentation et de votre exemple (non testé):

    var table = $('#myTable').DataTable( {
    dom: "B<'#colvis row'><'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>",
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5'
    ]
} );

new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            //Shorter than using the language.buttons.colvis option
            text: 'Change columns',
            postfixButtons: [ 'colvisRestore' ],
            columns: '0,1,2,3,4,5,6'
        }
    ]
} );

//To append it at the bottom of the table
//3 since the colvis button is at the 3rd index in the buttons array
table.buttons( 3, null ).container().appendTo(
    table.table().container()
);

//To append it on the first row after the buttons, in the #colvis row
table.buttons( 3, null ).container().appendTo(
     $('#colvis'), table.table().container()
);

    Si cela ne fonctionne pas, faites le moi savoir et je vais mettre à jour ma réponse.

    Salut, je vous Remercie pour votre réponse. Mais c'est de lancer une erreur comme "Uncaught TypeError: Cannot read property 'inst' undefined" de la Datatable fichier JS.
    Mutilple Bs'est parfaitement légal. dataTables juste insère un "cloné" bouton de section pour chaque B. Oui, la déclaration de plusieurs objets de bouton pourrait être une solution de contournement, une version plus complexe de simplement déplacer les boutons. Toutefois, il convient de <buttonObject>.container().appendTo(<element>), et table.table().container() est juste la table wrapper lui-même.
    Je devine que vous obtenez cette erreur, parce que vous n'êtes pas le chargement de la bibliothèque correctement. $.fn.dataTable est probablement pas défini et en jetant de l'erreur. Je voudrais voir comment vous êtes en train de charger les scripts pour être sûr. Voir cette question et les deux réponses.

    OriginalL'auteur GreeKatrina