DataTable Cards View Problem

Huw_Pearce

https://www.sailwave.com/results/huw/Sailwave-DataTables-ExperimentV07.htm**:
**Debugger code (debug.datatables.net): ugamot
Error messages shown:
Description of problem:
Having fixed, with guidance, my previous issue with getting code to work on more than one table now works. But has revealed another problem.

I am trying to use DataTables Card View (https://codepen.io/RedJokingInn/pen/bGoppqP) which works on single table but with the 3 tables; I get 3 buttons to toggle to Card view for the first table, 2 buttons for the second table and 1 button for the third table.

The only button that works is the left button of 3 on the first table.

Any guidance to help resolve the problem will be much appreciated by this newbie coder and user of DataTables.

Kind regards,
Huw

allan

Hi Huw,

        $(".dt-buttons .btn-group").append(
                '<a id="cv" class="btn btn-primary" href="#">Click to toggle</br>between</br>table and card view</a>'
            );

is the problem. That is adding the a tag to every btn-group that it finds on the page. The first time around, that's just one, the second it finds two, etc.

What you should do is create a custom button, rather than injecting the HTML.

Allan

Huw_Pearce

Hi Allan,

Thank you for taking time to reply, it is much appreciated.

Having look at the 'create custom button' page there is a lot for me for me to take in and understand.

Thank you again for your suggestion and the pointer.

Kind regards,
Huw

Huw_Pearce

Hi Allan,

I have used your suggestion and created a custom button which I have got working. This together with the advice in my other thread has enable me to get pretty much want I wanted to achieve.

The outcome can be seen at https://www.sailwave.com/results/huw/Sailwave-DataTables-ExperimentV12.htm.

Although there is a bit of fine tuning probably required.

Thank you for your pointers.

Kind regards,
Huw

allan

Very cool! That looks great. Delighted to hear you got it working the way you want.

Allan