source

DataTables agax.reload()의 페이지 손실

ittop 2023. 9. 4. 20:38
반응형

DataTables agax.reload()의 페이지 손실

저는 jQuery DataTables를 사용하고 있습니다.아약스 요청 후에 전화합니다.the ajax.reload()데이터를 새로 고치는 방법표를 선택합니다. 그러나 현재 페이지가 손실됩니다.첫 페이지를 반환합니다.

다음은 제 데이터 테이블입니다.

datatable_appointments = $('#datatable_appointments').DataTable({
    "responsive" : true,
    "processing" : true,
    "serverSide": true,
    "bSort" : false,
    "ajax": function(data, callback, settings) {
        // make a regular ajax request using data.start and data.length
        $.get(URL_API + URL_APPOINTMENTS_STATE + '/', {
            limit: data.length,
            offset: data.start,
            search: data.search.value
        }, function(res) {
            if (res.error) {
                callback({
                    recordsTotal: 0,
                    recordsFiltered: 0,
                    data : ""
                });
            } else {
                data_appointments = res.data;
                // map your server's response to the DataTables format and pass it to
                // DataTables' callback
                callback({
                    recordsTotal: res.total_data,
                    recordsFiltered: res.total_data,
                    data: res.data
                });
                $("#datatable_appointments > tbody > tr > td").addClass("text-center");
                $("#datatable_appointments > tbody > tr > td").css("vertical-align", "middle");
                $("#datatable_appointments > thead > tr > th").addClass("text-center");
            }
        });
    },
    "columns" : [
        { "data": "service_name"},
        { "data": "doctor_info"},
        { "data": "patient_name", render: function (data, type, row, meta) {
            return row.name + " " + row.surname;
        }},
        { "data": "appointment_date", render: function (data, type, row, meta) {
            var formattedDate = new Date(row.appointment_date);
            var day = formattedDate.getDate();
            var month =  formattedDate.getMonth();
            var hours = (formattedDate.getHours().toString().length == 1) ? '0' + formattedDate.getHours() : formattedDate.getHours();
            hours += ':';
            hours += (formattedDate.getMinutes().toString().length == 1) ? formattedDate.getMinutes() + '0' : formattedDate.getMinutes();
            return day + ' ' + months[month] + ', ' + hours;
        }},
        { "data": "state", render: function (data, type, row, meta) {
            if (row.state == '0')
                return '<i class="fa fa-circle font-red-mint"></i><br />İptal';
            else if (row.state == '1')
                return '<i class="fa fa-circle font-green-jungle"></i><br />Onaylı';
            else if (row.state == '2')
                return '<i class="fa fa-circle font-grey-salsa"></i><br />Beklemede';
        }},
        { "data": "actions", render: function (data, type, row, meta) {
            if (row.state == '2')
                return '<div class="btn-group btn-group-circle">' +
                            '<button type="button" onclick="setState(\''+row.id+'\', \'1\');" class="btn btn-outline green btn-sm">Onayla</button>' +
                            '<button type="button" onclick="setState(\''+row.id+'\', \'0\');" class="btn btn-outline red btn-sm">İptal Et</button>' +
                        '</div>';
            else
                return '';
        }}
    ],
    "sPaginationType": "full_numbers",
    "language": {
        "emptyTable": "Kayıt bulunamadı.",
        "sZeroRecords": "Bu kriterde sonuç bulunamadı.",
        "search": "Bul",
        "sProcessing" : "<img src='/assets/global/img/loading-spinner-blue.gif' />",
        "sInfo": "Toplam <b>_TOTAL_</b> veri bulunmaktadır.",
        "sLengthMenu": "Gösterilen kayıt sayısı _MENU_",
        "sInfoFiltered": "",
        "sInfoEmpty":"",
        "paginate": {
            "sPrevious": "Önceki",
            "sNext": "Sonraki",
            "sFirst" : "İlk",
            "sLast" : "Son"
        }

    }
});

그리고 나의setState동일한 js 파일에 있는 메서드:

function setState(id, state) {
    $.ajax({
        url : URL_API + URL_APPOINTMENTS_STATE + '/' + id,
        type : 'put',
        data : {'state' : state},
        dataType : 'json',
        success : function (response) {
            if (response.error) {

            } else {
                datatable_appointments.ajax.reload();
            }
        }
    });
}

다음과 같이 현재 페이지를 유지하려면 매개 변수를 전달해야 합니다.

datatable_appointments.ajax.reload( null, false )

출처: https://datatables.net/reference/api/ajax.reload()

  $(document).ready(function() {
        $('#table_id').DataTable( {
            stateSave: true
        } );
    });

jQuery DataTables를 사용하고 있으며 페이지를 다시 로드하거나 편집, 삭제하는 등의 작업을 수행하려는 사람은 현재 페이지를 잃고 첫 번째 페이지로 이동하는 문제에 직면할 것입니다. 이 스니펫은 동일한 페이지를 유지하는 데 도움이 될 것입니다. 현재 페이지에서 첫 번째 페이지로 돌아가는 것을 방지합니다.

언급URL : https://stackoverflow.com/questions/42905454/datatables-ajax-reload-loses-page

반응형