SearchPanes v1.3.0 Initialisation with Buttons no longer works

SearchPanes v1.3.0 Initialisation with Buttons no longer works

SDU RIO AnalyticsSDU RIO Analytics Posts: 8Questions: 4Answers: 0

Description of problem: SearchPanes do not load and is no longer displayed on the page.

Error messages shown: panes is undefined.

14:45:10.532 Uncaught TypeError: panes is undefined
    filterChanged https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:33061
    _updateFilterCount https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:32905
    _startup https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:32666
    _paneDeclare https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:32472
    SearchPanes https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:31870
    init https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:33059
    _expandButton https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:25268
    add https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:24915
    <anonymous> https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:26509
    methodScoping https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:16382
    searchPanes http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:627
    buttons http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:769
    initComplete http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:548
    ret https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:15824
    map jQuery
    _fnCallbackFire https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:15823
    _fnInitComplete https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13972
    _fnInitialise https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13943
    callback https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13050
    success https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13080
    jQuery 6
    _fnBuildAjax https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13122
    _fnInitialise https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13927
    loadedInit https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:10445
    DataTable https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:10457
    jQuery 2
    DataTable https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:10015
    DataTable https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:24354
    Table http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:618
    run http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:560
    <anonymous> http://127.0.0.1:8000/foas/?n:314
    jQuery 13
datatables.js:33061:28
    filterChanged https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:33061
    _updateFilterCount https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:32905
    _startup https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:32666
    _paneDeclare https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:32472
    SearchPanes https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:31870
    init https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:33059
    _expandButton https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:25268
    add https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:24915
    <anonymous> https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:26509
    methodScoping https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:16382
    searchPanes http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:627
    buttons http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:769
    initComplete http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:548
    ret https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:15824
    map jQuery
    _fnCallbackFire https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:15823
    _fnInitComplete https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13972
    _fnInitialise https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13943
    callback https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13050
    success https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13080
    jQuery 6
    _fnBuildAjax https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13122
    _fnInitialise https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:13927
    loadedInit https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:10445
    DataTable https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:10457
    jQuery 2
    DataTable https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:10015
    DataTable https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.3.0/sl-1.3.3/datatables.js:24354
    Table http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:618
    run http://127.0.0.1:8000/static/js/DatatablesHighcharts.js:560
    <anonymous> http://127.0.0.1:8000/foas/?n:314
    jQuery 13

Screenshots

SearchPanes v1 3 0 Initialisation with Buttons no longer works

Workaround: SearchPanes v1.3.0 ==> v1.2.2

CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.9/sp-1.2.2/sl-1.3.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.8/sp-1.2.2/sl-1.3.3/datatables.js"></script>

SearchPanes initialisation using a Button & columnDefs:

buttons: [
    {
        extend: 'searchPanes',
        className: 'buttons-searchPanes',
        config: {
            cascadePanes: true
        }
    }
],
columnDefs: [
    {
        searchPanes: {
            show: true
        },
        targets: [0]
    },
]

src: https://datatables.net/extensions/searchpanes/examples/customisation/buttonConfig.html

Link to test case: -

Debugger code (debug.datatables.net): -

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    Just to confirm, are you saying that the example you linked to is showing the error (it isn't for me I'm afraid), or does it need a modification to show the pane for the first column?

    Allan

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948

    I built a test case for you with your code snippets:
    http://live.datatables.net/yamatige/1/edit

    Search Panes is working.

    Workaround: SearchPanes v1.3.0 ==> v1.2.2

    I updated the test case CDNs by using the link found in datatables.js to use 1.3.0. The test case still works.
    http://live.datatables.net/mavoqeha/1/edit

    Please update one of the test cases to show the issue.

    Kevin

  • SDU RIO AnalyticsSDU RIO Analytics Posts: 8Questions: 4Answers: 0

    I've updated the test case to make it closer to our usage perimeter:
    http://live.datatables.net/mavoqeha/5/edit

    I've reinstated sp-1.3.0 in the CDN links.

    We use jquery-3.6.0.min.js.
    We load our data with ajax: 'data.json' (cannot reproduce that one).

    As shown columnDefs parameter in $('#example').DataTable() combine with buttons: []parameter in $.extend(true, $.fn.dataTable.defaults) do not work well together.

    @SDU RIO Analytics

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @SDU RIO Analytics ,

    Thanks for creating that test case - it will help with debugging and I have managed to replicate the issue locally. Unfortunately I don't have time to take a look at it today, and I am off work until Wednesday the 16th, but I will take a look at it then.

    Thanks,
    Sandy

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948

    Thanks for the test case. It seems the problem occurs when using $.extend(true, $.fn.dataTable.defaults, { ... });. I moved the buttons config to the Datatables initialization and it works.
    http://live.datatables.net/mavoqeha/7/edit

    @allan or @sandy will need to take a look.

    Kevin

  • SDU RIO AnalyticsSDU RIO Analytics Posts: 8Questions: 4Answers: 0

    Thanks @kthorngren

    Looking forward to use sp-1.3.1 soon :smile:

    @SDU RIO Analytics

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi @SDU RIO Analytics ,

    Thanks again for pointing this out, and apologies for the wait!

    That should be the issue fixed now as you can see at this example. This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

    Thanks,
    Sandy

Sign In or Register to comment.