Extend multiple button types in a single button

Extend multiple button types in a single button

JLegaultJLegault Posts: 31Questions: 6Answers: 2

Link to test case: http://live.datatables.net/kiwocetu/2/edit
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem:
The Buttons extend option states that:

The buttons created can extend multiple existing button types - for example a customised button might extend any built in button type, and that customised button might itself be extended during initialisation to set the button text.

This obviously works if all you want to extend the button for is to change the text, but I would like to create a collection button that also has the properties of the 'selected' button.

Take a look at my test case, I have two buttons one that has a collection and the other that is a 'selected' type button. I would like to combine these two so the collection is only enabled when something is selected.

This question has an accepted answers - jump to answer


  • JLegaultJLegault Posts: 31Questions: 6Answers: 2

    Additionally, I cannot seem to find anywhere that describes an accepted way to cause the collection button to show the collection on hover instead of on click. Is this supported in any way or will I need to do some fancy jQuery work to make that happen?

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818
    Answer ✓

    It doesn't look like buttons.buttons.extend supports anything but a single button type as it only takes a string for the parameter. You could use the select and deselect then toggle the state based on the number of selected rows. For example:


  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818
    edited May 2021

    Looks like you can use the jQuery mouseenter event. But use mouseleave to close the button group might be tricky as the mouseleave event happens when the collection is displayed. You can experiment with this example:

    @allan or @colin may have better suggestion for both of your questions.


  • colincolin Posts: 15,202Questions: 1Answers: 2,592

    I'd say Kevin's first example with the select and deselect would be the way to go here.


  • JLegaultJLegault Posts: 31Questions: 6Answers: 2
    edited May 2021

    Select and deselect work perfectly, although I found a way to do it with slightly less code, utilizing some of the built-in variable functionality.

        tempTable.on('select deselect', function(e, dt, type, indexes){
            var count = tempTable.rows({selected:true}).count();

    I've decided against implementing the hover currently, it does not seem like the functionality is intended to work and a single click can't be ~that~ much more effort.

    Thank you all for your help!

This discussion has been closed.