'No data available in table' after changing filters

'No data available in table' after changing filters

montoyammontoyam Posts: 484Questions: 116Answers: 5
edited April 5 in SearchPanes

I am having trouble with a couple new projects (older projects appear to work fine).

When I click on a couple filters in SearchPanes (cascading is turned on), the dataTables correctly filter. But as I unselect the filters to try and make different filter selections, the SearhPanes all say 'No data available in table'. Even clicking 'Clear All' in the SearchPane does not work. I need to reload the page to get the values back in the SearchPane panels.

    var DevicesTable = $('#Devices').DataTable({
        searchPanes: {
            cascadePanes: true,
            viewTotal: true,
            controls: false,
            layout: 'columns-6',
            threshold: 1,
            //columns: [1, 2, 3, 4], //alertDates, alerts, CaseStatus, openActions
            emptyMessage: "<i><b>none</b></i>"
        },
        dom: 'PBfrtip',
        ajax: 'api/Devices',
        columns: [
            {
                title: "Lines",
                className: 'details-control',
                //orderable: false,
                data: null,
                defaultContent: '',
                width: '10%'
            },
            { data: "Devices.CM_ID", title: "ID", searchPanes: { show: false } },
            { data: "Devices.Department", title: "Department", searchPanes: { show: true } },
            { data: "Devices.DepartmentName", title: "Department Billed", searchPanes: { show: true } },
            { data: "Devices.DEVICE_NAME", title: "DEVICE_NAME", searchPanes: { show: false } },
            { data: "Devices.DESCRIPTION", title: "DESCRIPTION", searchPanes: { show: false } },
            { data: "Devices.DEVICE_SECURITY_PROFILE", title: "DEVICE_SECURITY_PROFILE", searchPanes: { show: false }  },
            { data: "Devices.DEVICE_POOL", title: "DEVICE_POOL", searchPanes: { show: true }},
            { data: "Lines.DIRECTORY_NUMBER", title: "DIRECTORY_NUMBER (line 1)", searchPanes: { show: false } },
            { data: "Lines.VOICEMAILPROFILE", title: "VOICEMAILPROFILE (line 1)", searchPanes: { show: true }}
        ],
        order: [[1, 'asc']],
        select: { style: 'single' },
        lengthChange: false,
        autoWidth: true,
        scrollX: true,
        buttons: [
            {
                extend: 'excelHtml5',
                autoFilter: true
            }
        ]
    });

setting CascadePanes to false seems to resolve the issue, but of course then they don't cascade.

Answers

  • colincolin Posts: 12,441Questions: 0Answers: 2,107

    I'm not seeing it with our examples. Are you able to link to a page that demonstrates the issue, please. 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

  • montoyammontoyam Posts: 484Questions: 116Answers: 5
    edited April 6

    yeah, that's the problem. I can't reproduce the issue either on your test site, even if i use the same js/css includes from the html page. unfortunately I can not provide a link to page because it is on our intranet. And it works just fine on other projects where I used the download builder tools to create the project.

    However, I create two c#/mvc projects from scratch, included these:

    <script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/searchpanes/1.2.1/js/dataTables.searchPanes.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/searchpanes/1.2.1/js/searchPanes.bootstrap4.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" />
        <link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/searchpanes/1.2.1/css/searchPanes.bootstrap4.min.css">
        <link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap4.min.css">
        <link rel="stylesheet" type="text/css"  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    
        <link rel="stylesheet" type="text/css"  href="Content/Site.css">
    
    
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
    

    and for BOTH projects I created this way, SearchPanes is acting the same way. When I unselect the filters, instead of showing all data, in the SearchPanes it shows 'No data available in table'. (although the dataTable itself returns to being unfiltered and shows all the data)

    So odd.

  • sandysandy Posts: 663Questions: 0Answers: 186

    Hi @montoyam

    Without a test case it is going to be hard for us to work out what is going on.

    Try changing your sources to use either 1.2.2 or the nightly builds - it might be something that has been fixed already...

    Thanks,
    Sandy

  • montoyammontoyam Posts: 484Questions: 116Answers: 5

    will do. Is there any way to view in the console what the filter is set to? or are there any other debug methods for SearchPanes?

  • montoyammontoyam Posts: 484Questions: 116Answers: 5

    (regarding my last comment, the filter for the SeachPane panels are incorrect while the filter for the DataTables appears to be correct)

  • colincolin Posts: 12,441Questions: 0Answers: 2,107

    This thread shows how to see what's been selected, but as Sandy said, we'd need to see this one to be able to debug it,

    Colin

  • montoyammontoyam Posts: 484Questions: 116Answers: 5

    oh my, it just got more confusing. Another user tried it on their machine and it works just fine. On my machine, I cleared cookies, and tried different browsers and it doesn't work on mine.

  • colincolin Posts: 12,441Questions: 0Answers: 2,107

    Are they using the same browser or OS? Maybe also try it in private browsing mode in case a browser extension is interfering somehow.

    Colin

  • montoyammontoyam Posts: 484Questions: 116Answers: 5

    For these two projects in which the SearchPanes was acting odd, I was using CDNs. My other projects in which SearchPanes behaves correctly I used the 'Generator' tool to download the javascript and css files into the project file. I brought these js and css files into the two projects that were not working and all is fine now. something was not working correct (on my machine anyway) using the CDNs (shown in my original post).

    I don't want to take anyone's time on this as it is now working with the downloaded js and css files, but if someone wants to think about this further I can leave the question open

  • colincolin Posts: 12,441Questions: 0Answers: 2,107

    Sounds odd but without seeing it it'll be hard to debug. If you're able to create a couple of test case for both conditions, we're happy to take a look,

    Colin

Sign In or Register to comment.