Datatable double ajax request on click

ibrahimmorsi

I have a page that loaded with ajax when I click anywhere in the page there are another ajax request is fired
there is another thread for similar problem but there no solution provided
https://datatables.net/forums/discussion/44855/datatables-double-ajax-request
below the code for the table

let datatable = $('#results').DataTable({
            language: language,
            serverSide: true,
            processing: true,
            ajax: {
                url: "/app/admin/AdminUsersAjax",
                type: 'POST'
            },
            lengthMenu: [[25, 50, 100], [25, 50, 100]],
            columns: [
                {
                    data: 'email',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'name',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'active',
                    searchable: false,
                    sortable: true
                },
                {
                    data: 'date',
                    searchable: false,
                    sortable: true
                },
                {
                    data: 'actions',
                    searchable: false,
                    sortable: false
                }
            ],
            responsive: true,
            drawCallback: () => {
                $('[data-toggle="tooltip"]').tooltip();
            },
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'table-responsive table-custom-container my-3'tr>" +
                "<'row'<'col-sm-12 col-md-5 text-muted'i><'col-sm-12 col-md-7'p>>"
        });        
    }
    else if(page === 'payments'){
        let datatable = $('#results').DataTable({
            language: language,
            serverSide: true,
            processing: true,
            deferLoading: [ 57, 100 ],
            ajax: {
                url: "/app/admin/AdminPaymentsAjax",
                type: 'POST'
            },
            lengthMenu: [[25, 50, 100], [25, 50, 100]],
            columns: [
                {
                    data: 'user_email',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'type',
                    searchable: false,
                    sortable: false
                },
                {
                    data: 'processor',
                    searchable: false,
                    sortable: false
                },
                {
                    data: 'name',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'email',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'amount',
                    searchable: false,
                    sortable: true
                },
                {
                    data: 'date',
                    searchable: false,
                    sortable: true
                }
            ],
            responsive: true,
            drawCallback: () => {
                $('[data-toggle="tooltip"]').tooltip();
            },
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'table-responsive table-custom-container my-3'tr>" +
                "<'row'<'col-sm-12 col-md-5 text-muted'i><'col-sm-12 col-md-7'p>>"
        });
        
    }

tangerine

There is a solution in that thread. A combination of a Responsive upgrade and (possibly) a browser refresh.