placement of print button, bootstrap 4, (put "B" where "l" used to be)

rldean1

I've got the button extension working!! Specifically, the "print" extension, where DT will create a printable version of the table However, I'm trying to find and/or understand the documentation to place the print button where I'd like. It'd be great to place it in the upper-left hand corner, where the [length changing input control] is. There's a bootstrap row with two columns here, one for the page length chooser, and the other for the search filter.

Additionally, if I wanted to create a whole row of my own button inputs, I would love to see a snippet of how to get it working.

tangerine

Use Buttons' direct insertion:
https://datatables.net/extensions/buttons/#Direct-insertion

rldean1

@tangerine I was trying to find that from earlier, thank you.

My comments below are probably stupid. I'm not personally familiar with using the new constructor. I initialize the table, I suppose, like a novice (see below).

Does DT recommend using vars and then calling the new constructor to bring tables into existence (as demonstrated in the link you've referenced)? Is this the only way I'll be able to appendTo the dt-buttons?

                        $("#tblJobSpecs").DataTable({
                            dom: 'Bftipr',
                            responsive: true,
                            pageLength: 25,
                            lengthChange: false,
                            data: jspecs.ary,
                            columns: [
                                { data: 'PosTitle', title: 'Position Title' },
                                { data: 'PosCode', title: 'Code' },
                                { data: 'Grade', title: 'Grade' },
                                { data: 'NewGrade', title: 'FY 19 Grade' },
                                { data: 'NewSchedule', title: 'FY 19 Schedule' }
                            ],
                            buttons: [
                                {
                                    extend: 'print',
                                    className: 'btn-primary',
                                    text: 'View/print full listing',
                                    autoPrint: false,
                                    title: 'Unified Schedule FY 19 Conversion',
                                    init: function(api, node, config) {
                                        $(node).removeClass('btn-secondary')
                                     }
                                }
                            ],
                        });

allan

There is a Bootstrap example showing how to use Buttons here. The dom option for Bootstrap is a lot more complex then you have here. I would suggest doing it using the direction insertion way as tangerine suggested and as shown in the example I linked to.

Allan

rldean1

@allan That's pretty much what I wanted to do, thank you for that snippet!

It's important to note that dom ought not be included when using .appendTo() to position the toolbar; or, at least not in my scenario. I noticed that if I included dom: Bftipr, their respective displays were offset in their own rows, as opposed to rows with two colums. So, commenting out dom made everything nice and tidy.

                        var table = $("#tblJobSpecs").DataTable({
                            //dom: 'Bftipr',  /*THIS MUST NOT BE INCLUDED*/
                            responsive: true,
                            pageLength: 25,
                            lengthChange: false,
                            data: jspecs.ary,
                            columns: [
                                { data: 'PosTitle', title: 'Position Title' },
                                { data: 'PosCode', title: 'Code' },
                                { data: 'Grade', title: 'Grade' },
                                { data: 'NewGrade', title: 'FY 19 Grade' },
                                { data: 'NewSchedule', title: 'FY 19 Schedule' }
                            ],
                            buttons: [
                                {
                                    extend: 'print',
                                    className: 'btn-outline-secondary',
                                    text: 'View/print full listing',
                                    autoPrint: false,
                                    title: 'Unified Schedule FY 19 Conversion',
                                    init: function (api, node, config) {
                                        console.log(node);
                                        $(node).removeClass('btn-secondary')
                                    }
                                }
                            ],
                        });

                        //placement of the button toolbar
                        table.buttons().container().appendTo('#tblJobSpecs_wrapper .col-md-6:eq(0)');