Search panes filter is very very slow

saeid2020 · January 30

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 · January 30

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 · February 1

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 · February 1

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 · February 4

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

allan · February 5

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 · February 5

Yes Allan. You can download it from here

saeid2020 · February 5

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

saeid2020 · February 14

Hi, Could you test it?

Search panes filter is very very slow

Search panes filter is very very slow

Answers

Howdy, Stranger!

Categories

DataTables

Search panes filter is very very slow

Search panes filter is very very slow

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables