SearchPanes: Neither countFiltered nor cascadePanes work with server-side processing

SearchPanes: Neither countFiltered nor cascadePanes work with server-side processing

globalplaneglobalplane Posts: 70Questions: 12Answers: 0
edited May 2023 in Free community support

Link to test case: https://comprehensibleinputwiki.com/ciwlibrary/test_case.php
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Client-side code:

document.addEventListener('DOMContentLoaded', function () {
                let table = new DataTable('#library-table', {
                    dom: 'Plfrtip',
                    serverSide: true,
                    ajax: {
                        url: "newvidadmin.php",
                        type: "GET"
                    },
                    deferRender: true,
                    "columns": [
                        { "data": "vid" },

                        { "data": "title" },

                        { "data": "channelTitle" },

                        { "data": "level" ,
                          "class": "level" },

                        { "data": "language" ,
                          "class": "language" },

                        { "data": "enabled" ,
                          "class": "enabled" },

                    ],
                    searchPanes: {
                        cascadePanes: true,
                        viewTotal: true,
                        i18n: {
                            count: '{total}',
                            countFiltered: '{shown} / {total}'
                        }
                    },
                    "columnDefs": [
                        { 
                            "targets": [5], "orderable": false 
                        }, 
                        {
                            "targets": 3,
                            "createdCell": function (td, cellData, rowData, row, col) {
                                $(td).attr('data-field', 'level');
                            }
                        },
                        {
                            "targets": 4,
                            "createdCell": function (td, cellData, rowData, row, col) {
                                $(td).attr('data-field', 'language');
                            }
                        },
                        {
                            "targets": 5,
                            "createdCell": function (td, cellData, rowData, row, col) {
                                $(td).attr('data-field', 'enabled');
                            }
                        },
                    ]
                });
            });

I can't get the filtered count to show up when using the Editor PHP library. It shows the total count for each entry just fine, but adding a filter doesn't show an updated filtered count.

Edit: The filtered count is being sent over with the JSON from the server, the client just isn't using it.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,715Questions: 1Answers: 10,106 Site admin

    Can you show me the server-side code you are using?

    This is an example of SearchPanes with cascade enabled and server-side processing.

    Allan

  • globalplaneglobalplane Posts: 70Questions: 12Answers: 0
    include( "/var/www/comprehensibleinputwiki.com/html/editor-php/lib/DataTables.php" );
    
    use 
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Mjoin,
        DataTables\Editor\Options,
        DataTables\Editor\Upload,
        DataTables\Editor\Validate,
        DataTables\Editor\SearchPaneOptions;
    
    $editor = Editor::inst( $db, 'alldata', 'main_index' )
        ->fields(
            Field::inst( 'main_index' ),
            Field::inst( 'id', 'vid')
                ->getFormatter( function ( $val, $data ) {
                return '<iframe height="200" src="https://www.youtube-nocookie.com/embed/' . $val . '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
                } ),
            Field::inst( 'channel', 'channelTitle' )
                ->searchPaneOptions( SearchPaneOptions::inst() ),
            Field::inst( 'language_name', 'language' )
                ->searchPaneOptions( SearchPaneOptions::inst() ),
            Field::inst( 'title', 'title' ),
            Field::inst( 'level', 'level' )
                ->searchPaneOptions( SearchPaneOptions::inst() ),
            Field::inst( 'enabled', 'enabled' )
                ->searchPaneOptions( SearchPaneOptions::inst() )
    
        )
        
        ->write( false )
        ->debug(true, './debug.log')
        ->process( $_GET )
        ->json();
    

    I don't see anything wildly off from the example which would make it not work.

  • allanallan Posts: 61,715Questions: 1Answers: 10,106 Site admin

    Me neither! What version of the libraries are you using? You can check in Editor.php and search for the version property.

    What does the JSON return show?

    Thanks,
    Allan

  • globalplaneglobalplane Posts: 70Questions: 12Answers: 0

    Sure, the version is 2.1.2. And here is some of the JSON. I just removed some of the data from two of the columns, and the debug section to make it shorter, but it has the essentials. This is after clicking "Comprehensible Chinese" in the channelTitle Pane. As you can see on line 53 for Chinese, there are 110 rows filtered, out of 689 total, but in the SearchPane, it still says 689.

    {
        "data": [
            {
                "DT_RowId": "row_3944",
                "main_index": 3944,
                "vid": "<iframe height=\"200\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/0ENKD025Hkg\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>",
                "channelTitle": "Comprehensible Chinese",
                "language": "Chinese",
                "title": "Comprehensible Input Chinese | The Long Nose Story | Beginner Intermediate Chinese\/ TPRS",
                "level": 4,
                "enabled": 1
            },
            {
                "DT_RowId": "row_38",
                "main_index": 38,
                "vid": "<iframe height=\"200\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/2-jbfT29-No\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>",
                "channelTitle": "Comprehensible Chinese",
                "language": "Chinese",
                "title": "Intermediate - Low | A Simple Tongue Twister:\"Old Lady Sells Melons\" | Comprehensible Input | TPRS",
                "level": 2,
                "enabled": 1
            }
        ],
        "options": [],
        "files": [],
        "searchPanes": {
            "options": {
                "channelTitle": [
                    {
                        "label": "ALG Mandarin Online on Magic Ship ",
                        "total": 269,
                        "value": "ALG Mandarin Online on Magic Ship ",
                        "count": 269
                    },
                    {
                        "label": "Acquire Mandarin",
                        "total": 156,
                        "value": "Acquire Mandarin",
                        "count": 156
                    }
                ],
                "language": [
                    {
                        "label": "Cantonese",
                        "total": 2,
                        "value": "Cantonese",
                        "count": 0
                    },
                    {
                        "label": "Chinese",
                        "total": 689,
                        "value": "Chinese",
                        "count": 110
                    },
                    {
                        "label": "Czech",
                        "total": 9,
                        "value": "Czech",
                        "count": 0
                    }
                ],
                "level": [
                    {
                        "label": null,
                        "total": 9415,
                        "value": null,
                        "count": 6
                    },
                    {
                        "label": 1,
                        "total": 323,
                        "value": 1,
                        "count": 5
                    },
                    {
                        "label": 2,
                        "total": 512,
                        "value": 2,
                        "count": 44
                    },
                    {
                        "label": 4,
                        "total": 733,
                        "value": 4,
                        "count": 53
                    },
                    {
                        "label": 6,
                        "total": 297,
                        "value": 6,
                        "count": 3
                    }
                ],
                "enabled": [
                    {
                        "label": null,
                        "total": 20,
                        "value": null,
                        "count": 0
                    },
                    {
                        "label": 0,
                        "total": 9101,
                        "value": 0,
                        "count": 2
                    },
                    {
                        "label": 1,
                        "total": 2159,
                        "value": 1,
                        "count": 109
                    }
                ]
            }
        },
        "draw": 4,
        "recordsTotal": 11280,
        "recordsFiltered": 111
    }
    
  • globalplaneglobalplane Posts: 70Questions: 12Answers: 0
    edited May 2023

    Any ideas for this? I've been trying, and can't figure out why the client ignores count in the json.

    New test case link: https://comprehensibleinputwiki.com/ciwlibrary/testcase5.php

  • globalplaneglobalplane Posts: 70Questions: 12Answers: 0

    Ok, I think I'm getting somewhere in hunting it down. In this function of datatables.js:

           SearchPanesST.prototype._serverTotals = function () {
    
                for (var _i = 0, _a = this.s.panes; _i < _a.length; _i++) {
                    var pane = _a[_i];
                    if (pane.s.colOpts.show) {
    

    The stuff after the if(pane.s.colOpts.show) never runs. If I force it to run by doing if(true), then the panels show {count} / 357. As in the count variable doesn't get replaced. But at least collapse works if I do that.

  • allanallan Posts: 61,715Questions: 1Answers: 10,106 Site admin

    Could you add this to your DataTables initialisation:

            columnDefs:[{
                searchPanes:{
                    show: true,
                },
                targets: '_all',
            }],
    

    I don't know why that appears to be needed. SearchPanes is due for an overhaul as soon as I'm finished the current batch of work.

    Allan

  • globalplaneglobalplane Posts: 70Questions: 12Answers: 0
    edited May 2023

    Ok, I added that to my actual page, not the test page, since I was messing with that datatables.js code for the test page and I might have changed important things.

    Anyway, here's the link:
    https://comprehensibleinputwiki.com/ciwlibrary/vidadmin.php

    After adding that, collapse works, but not count:

  • allanallan Posts: 61,715Questions: 1Answers: 10,106 Site admin
    Answer ✓

    Thanks! I think I see the issue - it should be {shown} in the string rather than {count}. The docs for this parameter don't mention {count}.

    Allan

  • globalplaneglobalplane Posts: 70Questions: 12Answers: 0

    Oh, wow, I don't know where I got count. Thank you for spotting that!

Sign In or Register to comment.