Обновление только DataTable после нажатия кнопки

Question

У меня возникли некоторые проблемы при попытке обновить данные после обновления данных в базе данных. Мне бы хотелось, чтобы данные обновлялись на javascript ajax, но я не хочу, чтобы обновлялась вся страница.

Я новичок в таблицах данных и, похоже, не могу понять, что делать.

Любая помощь будет принята с благодарностью.

JavaScript

        $.ajax({
            url: 'post_project_definition',
            type: 'GET',
            data: {
                discID: $("#disciplinesProjDef").val(),
                discComment: $("#txtDiscipComment").val(),
            },
            success: () => {
                swal({
                    type: 'success',
                    title: 'Your comment has been added successfully'
                });
            }
        })
        $.getJSON('selectProjectDefinitionDescription', function (data) {
            $.each(data, function (i, item) {
                ProjDefTable.push([data[i].id,data[i].definition_name, data[i].description, 
                    "<input type='button' class='btn btn-danger' id='" + data[i].id + "delete' value='-'></input>"+
                    "<script>"+
                    "   $('#"+data[i].id+"delete').on('click', () => {" +
                    "       $.ajax({"+
                    "           url: 'delete_project_definition',"+
                    "           type: 'GET',"+
                    "           data: { "+
                    "               project_def_id: '"+data[i].id+"' "+
                    "           },"+
                    "       });"+
                    "   });" +
                    "</script>"
                ]);

                var table = $("#projDiscComTable").DataTable();
                table.clear().draw();
                table = $("#projDiscComTable").DataTable({
                    data: ProjDefTable,
                    columns: [
                        {title: "ID"},
                        { title: "Discipline Name" },
                        { title: "Discipline Description" },
                        { title: "Delete" },
                    ],
                    destroy: true
                });
            })//end else
        });
    });

PHP

public function selectProjectDefinitionDescription()
{
    $session_data = $this->session->userdata('logged_in');
    $id = $session_data['id'];
    $type =  $session_data['usertype'];
    $project_id = $session_data['project_id'];

    $stuff = $this->Projects_Model->load_Project_Definition_Discipline($project_id);
    echo $stuff;
}

HTML

<table id="projDiscComTable" class="table table-hover display">
  <thead>
   <tr>
    <th>ID</th>
    <th>Disciple</th>
    <th>Discipline Comment</th>
    <th>Delete</th>
   </tr>
  </thead>
</table>

Answer 1

Как насчет обновления таблицы после вставки комментария .?

$('#projDiscComTable').DataTable().ajax.reload();

$.ajax({
            url: 'post_project_definition',
            type: 'GET',
            data: {
                discID: $("#disciplinesProjDef").val(),
                discComment: $("#txtDiscipComment").val(),
            },
            success: () => {
                $('#projDiscComTable').DataTable().ajax.reload();
                swal({
                    type: 'success',
                    title: 'Your comment has been added successfully'
                });
            }
        })

Не уверен, что это соответствует вашим требованиям, но вы все равно можете обновить его после вставки комментария.

Answer 2

Я не использовал DataTable много, но я полагаю, что они используются для того, чтобы обеспечить различные функции, такие как сортировка и т. Д., Легко для ваших таблиц HTML. ( Ссылка )

Принимая во внимание проблему, я считаю, что ваша задача - обновить содержимое таблицы на основе ответа AJAX без необходимости обновления всей страницы.

Вы можете сделать это, используя append() и remove() функции jQuery. Простой алгоритм выглядит следующим образом:

1. Прежде всего, вы можете иметь образец строки HTML где-то на своей странице, спрятанный так:

<div id="definition-row-sample">
    <tr class="definition-row">
        <td class="definition-id"></td>
        <td class="definition-name"></td>
        <td class="definition-description"></td>
        <td class="definition-delete"></td>
    </tr>
</div>

Сделайте .definition-row скрытым, чтобы он не отображался на вашей странице. Теперь, когда вы выбираете данные через AJAX, сначала удалите все строки с помощью: $('.definition-row').remove(), а затем переберите свои данныеи добавьте каждую строку в таблицу:

    $.each(data, function (i, item) {
        $('#definition-row-sample').find('.definition-id').text(data[i].id);
        $('#definition-row-sample').find('.definition-name').text(data[i].definition_name);
        $('#definition-row-sample').find('.definition-description').text(data[i].description);
        //then simply append it to the table
        let content = $('#definition-row-sample').find('.definition-row').clone();
        $('#projDiscComTable').append(content);
    });

А что касается удаления, вы можете определить нормальную функцию, например:

function definition_delete(id) {
    $.ajax({
        url: 'delete_project_definition',
        type: 'GET',
        data: {
           project_def_id:id
        }
    });   
}

document.on('click', '.definition-delete', function(){
    let id = $(this).parent().find('.definition-id').text();
    definition_delete(id);
});

Я не проверял код, но яя уверен, что вы поняли идею и заставили ее работать, так как я использовал логику, аналогичную одной из моих проектов.

Answer 3

Я понял, я перерисовал таблицу в успехе в AJAX, и, кажется, работает из того, что я вижу. Но спасибо за все ответы. Я буду использовать то, что вы, ребята, предложили в будущем.

var ProjDefTable = [];
$('#btnDiscipCommPost').on('click', () => {
    $.ajax({
        url: 'post_project_definition',
        type: 'GET',
        data: {
            discID: $("#disciplinesProjDef").val(),
            discComment: $("#txtDiscipComment").val(),
        },
        success: () => {
            swal({
                type: 'success',
                title: 'Your comment has been added successfully'
            });
            $.getJSON('selectProjectDefinitionDescription', function (data) {
                $.each(data, (i) => {
                    ProjDefTable.push([data[i].id,data[i].definition_name, data[i].description, 
                    "<input type='button' class='btn btn-danger' id='" + data[i].id + "delete' value='-'></input> <span id='" + data[i].id + "deleted' style='display: none; font-weight: 700;'>DELETED</span>"+
                    "<script>"+
                    "   $('#"+data[i].id+"delete').on('click', () => {" +
                    "       $.ajax({"+
                    "           url: 'delete_project_definition',"+
                    "           type: 'GET',"+
                    "           data: { "+
                    "               project_def_id: '"+data[i].id+"' "+
                    "           },"+
                    "           success: () => {"+
                    "               var x = document.getElementById('" + data[i].id + "delete');" +
                    "               x.style.display = 'none';" +
                    "               var y = document.getElementById('" + data[i].id + "deleted');" +
                    "               y.style.display = 'block';" +
                    "           } "+
                    "       });"+
                    "   });" +
                    "</script>"
                    ]);

                    var table = $("#projDiscComTable").DataTable();
                    table.clear().draw();
                    table = $("#projDiscComTable").DataTable({
                        data: ProjDefTable,
                        columns: [
                            {title: "ID"},
                            { title: "Discipline Name" },
                            { title: "Discipline Description" },
                            { title: "Delete" },
                        ],
                        destroy: true
                    });
                })//end else
            });
            var ProjDefTable = [];
        }
    })
});