刷新页面而不会丢失dataTable中的活动分页--JQuery

I want to keep selected the pagination of the data table after submitting the form using ajax.

Currently the code is working fine saving and showing the data into data-table format but whenever I try to save the data table, it keeps going back to the first page but what I'm trying to do is to keep the selected page number active so that the user will easily see the data.

Some Thread that I read these past few hours.

stateSave: true

Adding this code will resolve the problem. But I tried it nothing happens

My Current Ajax code:

    function refresh_Table(){
    $.ajax({
        headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: "{{ route('printdate') }}",
        method: "GET",
        data:{}, 
        success:function(data)
        {
            $('#table_DTR').html(data);

            $('#table_time_records').dataTable({
                "serverSide": false, 
                "retrieve": true, 
                "ordering": false
            });
        },
        error: function(xhr, ajaxOptions, thrownError){
            console.log(thrownError + "
" + xhr.statusText + "
" + xhr.responseText);
        }
    });
}

My Current Saving Data Code in Ajax:

$(document).on("click", ".btnApplyAlter", function(){

    var a = $('select[name=table_time_records_length]').val();
    validation_altered_data();    
    if(counter_alter_validation == 0)
    {
        $("select[name=table_time_records_length] option[value='365']").remove(); 
        $('select[name=table_time_records_length]').val(a).trigger('change');
        alert("Check the row you want to apply alter");   
    }
    else if(checker_validation == "false")
    { 
        $("select[name=table_time_records_length] option[value='365']").remove(); 
        $('select[name=table_time_records_length]').val(a).trigger('change');
        alert(error);
    }
    else
    {
        var c = confirm("Apply this alteration?");
        if(c == true)
        {
            $('.reason').prop("disabled", false);

            $.ajax({
                headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: "{{ route('applyalteration') }}",
                method: "POST",
                data: $('#alteration_data').serialize(), 
                beforeSend: function()
                {
                    document.getElementById('loader').style.display = "block";
                },
                success:function(data)
                {
                    if(data == "w")
                    {
                        alert("You don't have schedule for this day!");
                        $("select[name=table_time_records_length] option[value='365']").remove(); 
                        $('select[name=table_time_records_length]').val(a).trigger('change');   
                        $('.reason').prop("disabled", true);   
                    }
                    else
                    {
                        $("select[name=table_time_records_length] option[value='365']").remove(); 
                        $('select[name=table_time_records_length]').val(a).trigger('change');          
                        alert("Alteration Applied!");
                    } 
                },
                complete:function(){
                    refresh_Table();
                    document.getElementById('loader').style.display = "none";
                }
            }); 
        }
        else{
            $("select[name=table_time_records_length] option[value='365']").remove(); 
            $('select[name=table_time_records_length]').val(a).trigger('change');
        }
    } 
});

This image shows the output when I tried to use and play this code

    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
        localStorage.setItem('offersDataTables', JSON.stringify(oData));
    },
    "fnStateLoad": function (oSettings) {
        return JSON.parse(localStorage.getItem('offersDataTables'));
    }