DataTables double ajax request

Delete · September 2017

HI.
First DataTables is awsome and works great and fast but i have a strange problem using server processing im getting double ajax request with draw: 1 and draw: 2 parameters. The page that contains DataTables is loaded with ajax. The page contains 4 tables separated in bootstrap tabs. I also use one search field to search in all the tables.When searching everything is fine im getting only 4 ajax requests, only when loading the page im getting 8 double ajax requests.

here is the code for one table. All other tables are the same with different ajax data

$(document).ready(function () {


    $('#isprati tbody').unbind();

    var pocdatum = $('#pocdatum').val();
    var krajdatum = $('#krajdatum').val();

    var selectedUsluga = ($('input[name="usluga"]:checked').serialize());
    var selectedTip = ($('input[name="tip"]:checked').serialize());
    if ($.fn.DataTable.isDataTable("#isprati")) {
        $('#isprati').DataTable().clear().destroy();
    }
    var table1 = $('#isprati').DataTable({
        responsive: {
            details: {
                type: 'column'
            }
        },
        //deferRender: true,
        //pageResize: true,

        autoWidth: false,
        // "processing": true,
        "serverSide": true,
        "order": [[8, "asc"]],
        scrollY: '34vh',
        scrollCollapse: true,
        "pageLength": 100,
        "ajax": {
            url: "/admin/src/nalozi.src.php", // json datasource
            type: "post",  // method  , by default get
            data: {
                type: 1,
                checkUsluga: selectedUsluga,
                checkTip: selectedTip,
                nalogType: 'Да се испрати екипа',
                enddate: krajdatum,
                startdate: pocdatum
            }
        },
        columns: [
            {"data": null, "defaultContent": "", className: 'control', orderable: false, targets: 0},
            {"data": "1", targets: 1},
            {"data": "2", targets: 2},
            {"data": "3", targets: 3},
            {"data": "4", targets: 4},
            {"data": "5", targets: 5},
            {"data": "6", targets: 6},
            {"data": "7", targets: 7, className: 'none'},
            {"data": "8", targets: 8}
        ],
        buttons: [{
            text: 'Прати Екипа',
            className: 'btn btn-success btn-xs',
            action: function (e, dt, node, config) {
                var data = table1.rows('.selected').data().toArray();
                var newarray = [];
                for (var i = 0; i < data.length; i++) {
                    newarray.push(data[i][1]);
                }

                var sData = newarray.join();
                $.ajax({
                    type: 'post',
                    url: '/admin/src/nalogDetail.src.php',
                    data: {
                        nid: data[0]
                    },
                    success: function (data) {
                        $("#nbody").html('');
                        $("#nbody").html(data);
                        $("#nnaslo").html('');
                        $("#nnaslo").html('<button type="button" class="close" data-dismiss="modal">&times;</button><h5 id="nalogIDbr" data-id="' + nid + '" class="modal-title">Детали за налог бр: ' + nid + '</h5>');
                        $('#nalog-detail').modal("show");
                    }
                })

            },
            init: function (api, node, config) {
                $(node).removeClass('dt-button');
                $(node).removeClass('btn-default');
                $(node).addClass('pratiEkipa');
            }
        }],
        dom: 'B' +
        '<<"row"><"col-md-12"rt>>' +
        '<<"row"><"col-md-3"i><"col-md-9"p>>',
        "infoCallback": function (settings, start, end, max, total, pre) {
            return "Резултати: " + total;
        },
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            // Bold the grade for all 'A' grade browsers
            if (aData[6] === "Интернет") {
                $('td:eq(6)', nRow).html('<span class="label label-danger" style="font-size: 12px;">Интернет</span>');
            }
            if (aData[6] === "Телевизија") {
                $('td:eq(6)', nRow).html('<span class="label label-primary" style="font-size: 12px;">Телевизија</span>');
            }
            if (aData[6] === "Телефонија") {
                $('td:eq(6)', nRow).html('<span class="label label-info" style="font-size: 12px;">Телефонија</span>');
            }
            if (aData[6] === "Дигитална") {
                $('td:eq(6)', nRow).html('<span class="label label-success" style="font-size: 12px;">Дигитална</span>');
            }
            if (aData[6] === "Инфо Центар") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Инфо центар</span>');
            }
            if (aData[6] === "Канцеларија 4") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 4</span>');
            }
            if (aData[6] === "Канцеларија 5") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 5</span>');
            }
            if (aData[6] === "Канцеларија 6") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 6</span>');
            }
            if (aData[6] === "Канцеларија 7") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 7</span>');
            }
            if (aData[6] === "Канцеларија 8") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 8</span>');
            }
            if (aData[6] === "Наплатен центар") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Наплатен центар</span>');
            }
            if (aData[6] === "Шефови на екипи") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Шефови на екипи</span>');
            }


            if (aData[5] === "Дефект") {
                $('td:eq(5)', nRow).html('<span class="label label-danger" style="font-size: 12px;">Дефект</span>');
            }
            if (aData[5] === "Нов приклучок") {
                $('td:eq(5)', nRow).html('<span class="label label-primary" style="font-size: 12px;">Нов приклучок</span>');
            }
            if (aData[5] === "Исклучување") {
                $('td:eq(5)', nRow).html('<span class="label label-success" style="font-size: 12px;">Исклучување</span>');
            }
        },
        "language": {
            "sProcessing": "Процесирање...",
            "sLengthMenu": "_MENU_ записи",
            "sZeroRecords": "Не се пронајдени записи",
            "sEmptyTable": "Нема податоци во табелата",
            "sLoadingRecords": "Вчитување...",
            "sInfo": "_START_ до _END_ од _TOTAL_ записи",
            "sInfoEmpty": "0 до 0 од 0 записи",
            "sInfoFiltered": "(Вкупно _MAX_ записи)",
            "sInfoPostFix": "",
            "sSearch": "Барај",
            "sUrl": "",
            "oPaginate": {
                "sFirst": "Почетна",
                "sPrevious": "Претходна",
                "sNext": "Следна",
                "sLast": "Последна"
            }
        }
    });

   
    $("#tab_filter").unbind();
    $("#tab_filter").keyup(function (e) {
        if (e.keyCode === 13) {
            table1.search(this.value).draw();
          
        }
    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
    });


    $('#isprati tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });
    $('#isprati tbody').off('dblclick');

    $('#isprati tbody').on('dblclick', 'tr', function () {
        $('#nalog-detail').unbind();
        var data = table1.row(this).data();
        var nid = data[1];

        $.ajax({
            type: 'post',
            url: '/admin/src/nalogDetail.src.php',
            data: {
                nid: nid,
                allowed: 1
            },
            success: function (data) {
                $("#nbody").html('');
                $("#nbody").html(data);
                $("#nnaslo").html('');
                $("#nnaslo").html('<button type="button" class="close" data-dismiss="modal">&times;</button><h5 id="nalogIDbr" data-id="' + nid + '" class="modal-title">Детали за налог бр: ' + nid + '</h5>');
                $('#nalog-detail').modal("show");
            }
        })
    });

allan · September 2017

Could you link to the page showing the issue please? I don't see what would cause the problem in the above code.

Allan

Delete · September 2017

Sorry its not datatables issue i have this problem on other pages i just noticed.
Thx allan and sorry for wasting your time.

kvee · December 2017

I have the same problem. I found that double ajax call was from responsive.
Here is my code:

$('#usersTable').DataTable({
        'autoWidth': false,// prevent rotate screen and checkbox column too wide.
        'dom': '<"table-controls">f<"clearfix">rtip<"clearfix">',
        'columns': [
            {'data': ''},// responsive expand/collapse column
            {'data': 'id'},// checkbox column
            {'data': 'user_login'},
            {'data': 'user_display_name'},
            {'data': 'user_email'},
            {'data': 'groups'},
            {'data': 'status'},
        ],
        'columnDefs': [
            {
                'className': 'control',
                'orderable': false,
                'searchable': false,
                'targets':   0,
                'render': function() {
                    return '';// make first column render nothing (for responsive expand/collapse button only).
                }
            },
            {
                'searchable': false,// make checkbox column can't search.
                'orderable': false,// make checkbox column not sortable.
                'className': 'column-checkbox',
                'targets': 1,
                'render': function (data, type, row, meta) {
                    return '<input type="checkbox" name="user_id[]" value="' + $('<div/>').text(row.user_id).html() + '">';
                }
            },
            {
                'targets': 3,
                'render': function(data, type, row, meta) {
                    if (typeof(row.user_display_name) === 'undefined' || (typeof(row.user_display_name) !== 'undefined' && !row.user_display_name)) {
                        return '&mdash;';
                    } else {
                        return row.user_display_name;
                    }
                }
            },
            {
                'targets': 5,
                'render': function() {
                    return '';
                }
            },
            {
                'targets': 6,
                'render': function() {
                    return '';
                }
            }
        ],
        'order': [],// make sortable icon disappears from first column.
        'orderMulti': false,

        'responsive': {
            'details': {
                'type': 'column'
            }
        },

        'processing': true,
        'serverSide': true,
        'searchDelay': 1300,
        'ajax': {
            url: XhrCommon.currentUrlRaw,
            data: function(d) {
                d.CSRFTOKEN = 'customToken';
            }
        },
    });

Remove those responsive: {...} value and ajax request is just once otherwise it will be double call.

allan · December 2017

Yes - there is a bug in the current release of Responsive causing that I'm afraid. The nightly has it fixed already and it will be in the next release, which should happen this week.

Allan

Mignar · December 2017

@allan Is the new version out yet? I'm using 1.10.16 and 2.2.1 for responsive and still having this issue. Am I doing something wrong?

Thanks

allan · December 2017

Could you give me a link to the page showing the issue please? Responsive 2.2.1 should have resolved this.

Allan

Mignar · December 2017

Thank you for your response @allen ,
it seemed like I've had caching issues. I've cleared some things and now it works amazingly. Thank you !

DataTables double ajax request

DataTables double ajax request

Answers

Howdy, Stranger!

Categories

DataTables

DataTables double ajax request

DataTables double ajax request

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables