How do you open a new instance of DT in a seperate window/tab, but with a different pageLenght?

rldean1

I have a custom button that launches the same *.html page containing my table in a new tab.

I found this method: table.page.len( 100 ).draw();

                                {
                                    text: 'New Tab' + '<i class="fas fa-external-link-alt fa-fw"></i>',
                                    titleAttr: 'Launch this table in a seperate tab',
                                    className: 'btn-primary',
                                    init: function (dt, node, config) {
                                        console.log(node)
                                        $(node).removeClass('btn-secondary');

                                    },
                                    action: function (e, dt, node, config) {
                                        
                                        var win = window.open('jobspecs.htm', '_blank');
                                        //table.page.len( 100 ).draw();
                                        win.focus();
                                        console.log(win);
                                    }
                                }//end custom button

How do I make changes to table in the new tab? OR, is there a better programmatic way to call a new instance of DT in a separate window?

The only way I know how I might be able to accomplish this is by using jQuery to manipulate pageLength: in win.document.body

colin

Hi @raydlevel5 ,

Yep, you can just access the table with standard jQuery selectors, so something like:

$('#idOfTableInNewTab').DataTables().page.len(100).draw();

Hope that helps,

Cheers,

Colin

rldean1

@colin I'm opening the same page, but in a new tab, so the table has the same #id. When I attempt to manipulate the table in the new tab, I actually end up manipulating the table in the parent window, not the table in the new tab...

colin

Yep, but you'd make the selector specific to the new window. This StackOverflow discussion should help.

Cheers

Colin

rldean1

OK, so I've proved that I can target the DataTable in the NEW window, however, I'm still having issues.

    action: function (e, dt, node, config) {

        var a = window.open("jobspecs.htm", "_blank");
        a.focus();

        a.addEventListener('load', function () {


            a.console.log(a); //output to new window!
            a.console.log($(a.document.body));
            a.console.log($(a.document).find('#tblJobSpecs'));
            a.console.log($(a.document.body).find('#tblJobSpecs'));
            $(a.document.body).find('#tblJobSpecs thead').removeClass('thead-dark'); //proof of concept -- this manipulates the table in the NEW tab

        }, true);

    }

Now, if I try to call the page.len() method, it thinks I'm trying to reinitialize the table, which I'm not. (I tried to bypass this error with retrieve, but that didn't work either).

The following code generates this error: Uncaught TypeError: Cannot read property 'aDataSort' of undefined

    action: function (e, dt, node, config) {

        var a = window.open("jobspecs.htm", "_blank");
        a.focus();

        a.addEventListener('load', function () {
               
               $(a.document.body).find('#tblJobSpecs').DataTable().page.len(100).draw();

        }, true);

    }

So, I also tried to create a function that could be called after initialization, but this is where it thinks I'm trying to reinitialize.

The following code generates this error: _DataTables warning: table id=tblJobSpecs - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3_

/*example function available globally in my app, and from {window} */

function setPageLength(tbl, int) { 
    $(tbl).DataTable().page.len(int).draw();
}

    action: function (e, dt, node, config) {

        var a = window.open("jobspecs.htm", "_blank");
        a.focus();

        a.addEventListener('load', function () {

               a.myAppName.setPageLength('#tblJobSpecs', 100)

        }, true);

    }

So, I can manipulate the DOM in the new window, but I can't call page.len().

colin

Hi @raydlevel5 ,

Sorry, I just realised I haven't replied to this one. Is it an issue still or did you resolve the problem?

Cheers,

Colin

rldean1

@colin I gave up and ended up creating a brand new HTML/JS doc with the desired pageLength. This is not critical and can be closed.

I couldn't figure out how to manipulate the table in a new tab... this doesn't work:

//win is a var containing the new window
$(win.document.body).find('#tblJobSpecs').DataTable().page.len(100).draw();

Now I'm wondering if I should have dropped .draw().

Anyway, we're good, thanks for all the help!!

colin

Shame we couldn't get to the bottom of it, but glad you had a workaround

C