jQuery Datatable returns dublicate records initially loaded

Bilal123

*(function () {
$(function () {

    var _$fuelSaleTable = $('#FuelSaleTable');
    var _fuelSaleService = abp.services.app.pOSReport;
    var _fGMService = abp.services.app.fGM;
    var _entityTypeFullName = 'CPetro360.POSs.FGM';
    var _loader = $('.card-custom');
    var cookiesFlag = true;
    var firstTimeLoadFlag = true;
    var _$numberOfFilteredPermission = $("#NumberOfFilteredPermission");

    var _selectedPermissionNames = [];

    var itemVolumeSum = 0;
    var itemSalesSum = 0;
    var itemDiscountSum = 0;
    var itemNetAmountSum = 0;
    var itemLoyaltySum = 0;
    var itemLoyaltyNetSum = 0;


    var _entityTypeHistoryModal = app.modals.EntityTypeHistoryModal.create();

    function entityHistoryIsEnabled() {
        return abp.custom.EntityHistory &&
            abp.custom.EntityHistory.IsEnabled &&
            _.filter(abp.custom.EntityHistory.EnabledEntities, function (entityType) {
                return entityType === _entityTypeFullName;
            }).length === 1;
    }


    $('#FuelSaleTable tbody').on('click', '.details-control', function () {

        var data = $(this).attr('data-fuel');
        var tr = $(this).closest('tr');
        var row = dataTable.row(tr);
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.remove();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(formatFuels(data)).show();
            tr.addClass('shown');
        }
    });





    $("#Date,#POSIds").change(function () {
        LoadEOD();
    });

    function LoadEOD() {
        let businessDate = $("#Date").val();
        let posId = $("#POSIds").val();
        _fGMService.fGMTimeSpanListItems(posId, businessDate).done(function (result) {
            let options = result.map(values => {
                return `<option value="${values.value}" >${values.text}</option>`
            });
            $("#FGMId").html(options);

            DestroyFGMDropDown();
            if (firstTimeLoadFlag) {
                firstTimeLoadFlag = false;
                getFulesTable();
            }
        });
    }

    function DestroyFGMDropDown() {
        $('.Select2FGM').multiselect('destroy');
        $('.Select2FGM').multiselect({
            buttonWidth: '100%',
            maxHeight: '200',
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
        });
    }






    $('#GetFuelSaleButton, #RefreshFuelSaleButton').click(function (e) {
        e.preventDefault();
        getFulesTable();
    });

    $("#FilterByPermissionsButton").click(function () {
        _$permissionFilterModal.open({ grantedPermissionNames: _selectedPermissionNames });
    });




    function getFulesTable() {
        dataTable.ajax.reload();
    }

    function GetSetDateUsingCookie(businessDate) {
        var date = businessDate.split('/');
        var formatedDate = date[2] + "-" + date[0] + "-" + date[1];
        $("#Date").val(formatedDate);
    }

    function setFormatOnDateForCookie(date) {
        var dateSplit = date.split('-');
        var formatedDate = dateSplit[1] + "/" + dateSplit[2] + "/" + dateSplit[0];
        return formatedDate;
    }
    if ($("#BusinessDateTIme").val() != "" && $("#BusinessDateTIme").val() != null) {
        var formatedBusinessDate = moment(new Date($("#BusinessDateTIme").val())).format('YYYY-MM-DD');
        var bdate = setFormatOnDateForCookie(formatedBusinessDate);
        document.cookie = "BusinessDate=" + bdate;
    }





        //Date
        var selectedBusinessDate = $("#Date").val();
        const businessDate = document.cookie.split('; ')
            .find(row => row.startsWith('BusinessDate='))
            .split('=')[1];

        if (businessDate == "") {
            document.cookie = "BusinessDate=" + setFormatOnDateForCookie(selectedBusinessDate);
        }
        else {
            document.cookie = "BusinessDate=" + businessDate;
            GetSetDateUsingCookie(businessDate);
        }
        cookiesFlag = false;
    }

    function reloadfilters(_selectedPermissionNames) {
        var returnObject = {
            //filter: $('#FuelSaleTableFilter').val(),
            //tenantId: $('#FuelSaleTenantId').val(),
            /*siteId: $("SiteId").val(),*/
            reportId: $("#FGMId").val(),
            permissions: _selectedPermissionNames
        };


        //Store PosId in Cookie
        if (cookiesFlag) {
            //POSId
            cookiesFlag = false;
        }
        else {

            if ($('#POSIds').val().length) {
                document.cookie = "POSId=" + $('#POSIds').val();
                returnObject["pOSIds"] = $('#POSIds').val();

                returnObject["startDate"] = setFormatOnDateForCookie($("#Date").val());
                returnObject["endDate"] = setFormatOnDateForCookie($("#Date").val());
                returnObject["businessDate"] = setFormatOnDateForCookie($("#Date").val());

                document.cookie = "BusinessDate=" + setFormatOnDateForCookie($("#Date").val());
            }
        }
        return returnObject;
        //End Store PosId in Cookie

    }

    dashBoardGetSetDate();
    getCookiesValues();
    LoadEOD();

});

})();

kthorngren

jQuery Datatable returns dublicate records initially loaded

You haven't given us much information. I might be missing it but I don't see your Datatables initialization code. I do see ajax.reload() so I guess you are using the ajax option to load your data. The place to start is by debugging what is return from the server to see why there are the duplicate records.

If you still need help please provide more details of the problem and what troubleshooting steps you have taken. Or better a link to your page so we can take a look and help debug.

Kevin