Search panes filter is very very slow

saeid2020

Hi, I have 40000 rows. I have some search panes and the cascadePanes is true. The data loads in the table by ajax. In Datatables version 1.10.24 it works very fine. But today I downloaded version 1.13.8 and the search panes filter is very very slow. Is it possible to fix it?

allan

If you could give me a link to a test case showing the issue so I can profile it, I would be happy to look into it.

Allan

saeid2020

Hi,

This is the old datatables which works fine: https://old.tabyinmanzome.ir/datatables-old

This is the latest version which works very slowly: https://old.tabyinmanzome.ir/datatables-new

This is my code in both pages:

<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<script src="/DataTables/jquery-3.7.0.min.js"></script>
<script src="/DataTables/datatables.min.js"></script>

<script type="text/javascript">


    $(document).ready(function () {

        var listpath = document.getElementById("listpath");
        
        var jmtable = $("#listtable").DataTable({
            dom: 'PBfrtip',
            ajax: listpath.value,
            destroy: true,
            columns: [
                { data: "checkbox" },
                { data: "row_num" },
                { data: "FName" },
                { data: "LName" },
                { data: "UploadStatus" },
                { data: "City" },
                { data: "STownName" },
                { data: "StatusText" },
                { data: "GroupType" },
                { data: "GroupName" },
                { data: "Tel" },
                { data: "TelSocial" },
                { data: "FatherName" },
                { data: "Gender" },
                { data: "Nationality" },
                { data: "SCode" },
                { data: "BirthDate" },
                { data: "MadrakClassic" },
                { data: "MadrakHozavi" },
                { data: "DateSubmit" },
                { data: "Ostan" },
                { data: "Doreh" },
                { data: "Region" },
                { data: "Sodoor" },
                 { data: "RName" },
                { data: "StudentID" },
                 { data: "CourseID" },
                 { data: "CourseNum" },
                 { data: "StatusID" },
                 { data: "GroupTypeID" },
                 { data: "GroupNum" },
                { data: "TehRegion" }
                 

            ],
            deferRender: true,
            "scrollX": true,
            fixedColumns: {
                leftColumns: 4
            },
            searchPanes: {

                cascadePanes: true,
                layout: 'columns-3',
                columns: [21, 20, 5, 6, 13, 18, 4, 7, 8, 9,14, 24,31],
                order: ['Doreh', 'ostan', 'city','STownName', 'gender', 'MadrakHozavi', 'UploadStatus', 'StatusText', 'GroupType', 'GroupName','Nationality','RName','TehRegion'],
                panes: [{ name: 'Doreh' }, { name: 'ostan' }, { name: 'city' },{ name: 'STownName' }, { name: 'gender' }, { name: 'MadrakHozavi' }, { name: 'UploadStatus' }, { name: 'StatusText' }, { name: 'GroupType' }, { name: 'GroupName' }, { name: 'Nationality' }, { name: 'RName' }, { name: 'TehRegion' }],

            },

            columnDefs: [
                {

                    searchPanes: {
                        threshold: 1,
                        name: 'Doreh',
                    },
                    targets: [21]
                },
                {

                    searchPanes: {
                        threshold: 1,
                        name: 'ostan',
                        dtOpts: {
                            dom: "ti",
                            info: true,
                        },
                    },
                    targets: [20]
                },
                {
                    searchPanes: {
                        threshold: 1,
                        name: 'city',
                        dtOpts: {
                            dom: "ti",
                            info: true,
                        },
                    },
                    targets: [5]
                },
                {
                    searchPanes: {
                        threshold: 1,
                        name: 'STownName',
                        dtOpts: {
                            dom: "ti",
                            info: true,
                        },
                    },
                    targets: [6]
                }, 
                {
                    searchPanes: {
                        threshold: 1,
                        name: 'gender',
                    },
                    targets: [13]
                },
                {
                    searchPanes: {
                        show: true,
                        name: 'MadrakHozavi',
                    },
                    targets: [18]
                },
                {
                    searchPanes: {
                        threshold: 1,
                        name: 'UploadStatus',
                    },
                    targets: [4]
                },
                {
                    searchPanes: {
                        show: true,
                        name: 'StatusText',
                    },
                    targets: [7]
                },
                {
                    searchPanes: {
                        threshold: 1,
                        name: 'GroupType',
                    },
                    targets: [8]
                },
                {
                    searchPanes: {
                        threshold: 1,
                        name: 'GroupName',
                        dtOpts: {
                            dom: "ti",
                            info: true,
                        },
                    },
                    targets: [9]
                },
                
                {
                    searchPanes: {
                        threshold: 1,
                        name: 'Nationality',
                    },
                    targets: [14]
                },
            
            {
                    searchPanes: {
                        threshold: 1,
                        name: 'RName',
                        
                    }, 
                "targets": [ 24 ],
                "visible": false
                
                
            }, 
                {
                "targets": [ 25,26,27,28,29,30 ],
                "visible": false,
                "searchable": false
            }, 
            {
                    searchPanes: {
                        threshold: 1,
                        name: 'TehRegion',
                    }, 
                    "targets": [ 31 ],
                "visible": false
                
            }, 
                
                { "targets": 0, "orderable": false, "className": 'select-checkbox' }

            ],


            select: {
                style: 'multi',
                selector: 'td:first-child',
                info: false
            },

            buttons: [

                { extend: 'copyHtml5', text: 'Copy'
                 ,exportOptions: {
                    columns: ':visible'
                }
                },
                { extend: 'excelHtml5', text: 'Excel'
                 ,exportOptions: {
                    columns: ':visible'
                }
                },
                
            {
                text: 'Select All',
                action: function () {
                    jmtable.rows( { search: 'applied' } ).select();
                }
            }, 
                { extend: 'selectNone', text: 'UnSelectAll' }
            ],

            order: [[1, 'asc']]
        });

    });
</script>
<style>
    div.container {
        width: 80%;
    }
</style>
<?php

$ResultStr = '<table id="listtable" class="display" style="width:100%;table-layout:auto; text-align: center;white-space: nowrap">
    <thead>
    <tr>
    <th></th>
    <th>row_num</th>
    <th>FName</th>
    <th>LName</th>
    <th>UploadStatus</th>
    <th>City</th>
    <th>STownName</th>
    <th>StatusText</th>
    <th>GroupType</th>
    <th>GroupName</th>
    <th>Tel</th>
    <th>TelSocial</th>
    <th>FatherName</th>
    <th>Gender</th>
    <th>Nationality</th>
    <th>SCode</th>
    <th>BirthDate</th>
    <th>MadrakClassic</th>
    <th>MadrakHozavi</th>
    <th>DateSubmit</th>
    <th>Ostan</th>
    <th>Doreh</th>
    <th>Region</th>
    <th>Sodoor</th>
    <th>RName</th>
    <th>StudentID</th>
    <th>CourseID</th>
    <th>CourseNum</th>
    <th>StatusID</th>
    <th>GroupTypeID</th>
    <th>GroupNum</th>
    <th>TehRegion</th>
    </tr>
    </thead>';

$listfile = 'testdata/test.txt';
$ResultStr .= '</table><input id="listpath" type="hidden" value="../'.$listfile.'" />';
print_r( $ResultStr );




<?php
>
?>

allan

Thank you - I'll try it with the latest development versions tomorrow. There have been a lot of changes since the 1.13.8 release.

Allan

saeid2020

Hi, Did you test my code with the latest development versions?

allan

Any chance you can allow cross domain access to your JSON file please?

I tried it here but it doesn't let me load the JSON due to the CORS error.

Thanks
Allan

saeid2020

Yes Allan. You can download it from here

saeid2020

Also I allowed cross domain access. Now it loads the data but very very slowly.

saeid2020

Hi, Could you test it?