SearchPanes won't show more than 3 columns and can't be forced

Wontonamo

Hi,

I'm trying to use the SearchPanes extension and it doesn't seem to work right. I have a table that has 12 columns with over 13k rows of data. SearchPanes is a button on this site and it only shows 3 of the columns (none of the ones I've defined to show). I'm trying to get all twelve columns to show in the SearchPanes just to see if we can do it and nothing is showing up. I have tried setting threshold to 1, I've tried forcing everything using show in the ColumnDefs. I've even tried reloading the panes and nothing seems to work. Maybe you can show me what I did wrong?

Here's the code:

<script>
    $(document).ready(function(){
        //Making a sticky header and footer
        var footer_height = $("footer").height();
        var header_height = $("header").height();
        var element = document.getElementById("main-body");
        $("main").css({
            'padding-top' : header_height + 5,
            'padding-bottom' : footer_height
        });
        //Setting up the DataTable
        var table = $('#data-table').DataTable({
            dom: 'Bflrtip',
            responsive: true,
            "data": @json($product_info),
            "columns" : [
                {
                    "name": "Name",
                    "title": "Name",
                    "data":"name"
                },
                {
                    "name": "Job Title",
                    "title": "Job Title",
                    "data":"job_title"
                },
                {
                    "name": "Company",
                    "title": "Company",
                    "data":"company"
                },
                {
                    "name": "Serial Number",
                    "title": "Serial Number",
                    "data":"serial_number"
                },
                {
                    "name": "Street Address",
                    "title": "Street Address",
                    "data":"street_address"
                },
                {
                    "name": "City",
                    "title": "City",
                    "data":"city"
                },
                {
                    "name": "State",
                    "title": "State",
                    "data":"state"
                },
                {
                    "name": "Postal Code",
                    "title": "Postal Code",
                    "data":"postal_code"
                },
                {
                    "name": "Phone Number",
                    "title": "Phone Number",
                    "data":"phone_number"
                },
                {
                    "name": "Product Status",
                    "title": "Product Status",
                    "data":"product_status"
                },
                {
                    "name": "Installation Date",
                    "title": "Installation Date",
                    "data":"installation_date"
                },
                {
                    "name": "Notes",
                    "title": "Notes",
                    "data":"notes"
                }
            ],
            "language":{
                "loadingRecords": "Please wait - loading..."
            },
            paging: true,
            scrollY: element.clientHeight - footer_height - header_height - 155,
            scrollX: true,
            // scrollCollapse: true,
            // deferRender: true,
            colReorder:true,
            stateSave: true,
            buttons: [
                'colvis',
                "searchPanes"
            ],
            columnDefs:[
                {
                    searchPanes:{
                        show:true,
                        threshold: 1
                    },
                    targets: [0, 1, 2, 3, 4, 5, 6],
                }
            ],
        });
        $('#data-table').DataTable().searchPanes.rebuildPane();
    });
</script>

Sorry for the messy code, I'm trying to get this up for a demo for a company. The columns showing on the search pane are: Job Title, State, Product Status. I thought I had this working, however I can't seem to get it to work the way it did. I'm building this site using Laravel and I'm passing data from PHP to JSON. I don't know enough to use data files or use serverside processing yet. I'm still learning.

I appreciate any help.

Thanks,
Jesse

Wontonamo

I apologize, the code came out wrong because I didn't see that I needed to use ticks.

<script>
    $(document).ready(function(){
        // var n = document.createElement('script');
        // n.setAttribute('language', 'JavaScript');
        // n.setAttribute('src', 'https://debug.datatables.net/debug.js');
        // document.body.appendChild(n);
        //Making a sticky header and footer
        var footer_height = $("footer").height();
        var header_height = $("header").height();
        var element = document.getElementById("main-body");
        $("main").css({
            'padding-top' : header_height + 5,
            'padding-bottom' : footer_height
        });
        //Setting up the DataTable
        var table = $('#data-table').DataTable({
            dom: 'Bflrtip',
            responsive: true,
            "data": @json($product_info),
            "columns" : [
                {
                    "name": "Name",
                    "title": "Name",
                    "data":"name"
                },
                {
                    "name": "Job Title",
                    "title": "Job Title",
                    "data":"job_title"
                },
                {
                    "name": "Company",
                    "title": "Company",
                    "data":"company"
                },
                {
                    "name": "Serial Number",
                    "title": "Serial Number",
                    "data":"serial_number"
                },
                {
                    "name": "Street Address",
                    "title": "Street Address",
                    "data":"street_address"
                },
                {
                    "name": "City",
                    "title": "City",
                    "data":"city"
                },
                {
                    "name": "State",
                    "title": "State",
                    "data":"state"
                },
                {
                    "name": "Postal Code",
                    "title": "Postal Code",
                    "data":"postal_code"
                },
                {
                    "name": "Phone Number",
                    "title": "Phone Number",
                    "data":"phone_number"
                },
                {
                    "name": "Product Status",
                    "title": "Product Status",
                    "data":"product_status"
                },
                {
                    "name": "Installation Date",
                    "title": "Installation Date",
                    "data":"installation_date"
                },
                {
                    "name": "Notes",
                    "title": "Notes",
                    "data":"notes"
                }
            ],
            "language":{
                "loadingRecords": "Please wait - loading..."
            },
            paging: true,
            scrollY: element.clientHeight - footer_height - header_height - 155,
            scrollX: true,
            // scrollCollapse: true,
            // deferRender: true,
            colReorder:true,
            stateSave: true,
            buttons: [
                'colvis',
                "searchPanes"
            ],
            columnDefs:[
                {
                    searchPanes:{
                        show:true,
                        threshold: 1
                    },
                    targets: [0, 1, 2, 3, 4, 5, 6],
                }
            ],
        });
        $('#data-table').DataTable().searchPanes.rebuildPane();
    });
</script>

colin

They're probably not showing by default as the threshold is too low. You can force the panes to appear with columns.searchPanes.show, as shown in this example,

Colin

sandy

Hi @Wontonamo ,

@colin is right, that is the best way to force them to show, although it looks like you are already doing that at the bottom of the code that you have provided.

I've put together an example loading data from the javascript and displaying 6 Panes in the popover for the button, take a look here, would you be able to edit that please to recreate your issue?

Thanks,
Sandy

colin

Ah, yep, the problem is because you're defining columns and columnDefs - the former will over-ride the latter. Just put

                    searchPanes:{
                        show:true,
                    },

into each of the entries for columns,

Colin