stateSaveCallback and stateLoadCallback: Custom Buttons in DOM

soulbriski

Hi

I have a container for a set of custom buttons drawn in the dataTables initialisation using a div like:- dom: "<'#sds-btns.col'f>" sort of scenario.

A set of buttons are prepared using PHP to decide which buttons are appropriate for the table in use. An example of the button preparation is:-

$sdsButtons = '';
            // SDS BUTTONS
            // $obj['show_upload_button'] = true or false
            if ($obj['show_upload_button'])
            {
                $sdsButtons .= "{ name: 'upload', className: 'btn btn-sm btn-outline-blue px-2', text: '" . Text::get('BUTTON_TEXT_UPLOAD') . "', titleAttr: '" . Text::get('LINK_TITLE_UPLOAD_FILE') . "', action: function () {
                    $('#id-upload').modal('show');
                                        }
                                        },";

            }

Any custom buttons that were created are then added to the container with:-

                var sdsB = new $.fn.dataTable.Buttons( tbl, 
                    {
                        buttons:[" . $sdsButtons . "]
                    });

                sdsB.container().appendTo( '#sds-btns' );

Everything works perfectly well, No issues, all is good.

However, if I add stateSave: true to the table initialisation then the buttons are not added to the DOM despite there being no errors and the code executing seemingly normally.

So, I added stateSaveParams before I save the state using stateSaveCallback() function:-

stateSaveParams: function (settings, ssData) { ssData.buttons = [" . $sdsButtons . "] },
The buttons and everything else gets saved to my database as a JSON string like:-

"buttons":[{"attr":{"id":"add-new-tbl_crm"},"name":"new","className":"btn btn-sm btn-outline-blue px-2","text":"Create New","titleAttr":"Create New","action":""},{"attr":{"id":"btn-slideout","type":"button","aria-pressed":"true","data-toggle":"button"},"className":"btn btn-sm btn-outline-blue px-2 active","name":"slideout","text":"<i class='fas fa-filter fa-fw'><\/i>","titleAttr":"Apply Filter"}]

But, immediatley following the save, the 'new' button fires as though it has been clicked and the 'action' on that button is carried out!

2 questions arise from this.

Why does the 'new' button (id='add-new-tbl_crm') fire?
How do I load the button info back in the stateLoadParams(see below) function before stateLoadCallback is called

stateLoadParams: function (settings, ssData) { // I don't know what to do here ??????? = ssData.buttons; },

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

soulbriski

Thank you Colin, I'll see if I can create a test case. It's my first time using dataTables and a lot of what happens in the tables is conditional but I'll see if I can apply the basics to a test case

Regards

Brian