Как добавить новую строку в Jquery DataTable без потери новой строки при переходе с одной страницы на другую

Question

У меня есть таблица, содержащая данные, созданные с использованием JqueryDataTable.

 function showGrid()
        {
           var table = $('#example').DataTable({
                stateSave: true,
                
                rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows groupping is applied
                    // (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)

                    1, 0
                ]
                
            });
            var currentPage = table.page();
            table.page(currentPage).draw(false);
            $('#example').css("display", "block");
		}

Мне нужно создать новую строку в указанном c индексе. Я использовал код ниже, чтобы сделать это.

 function addRow() {
            $('#example > tbody > tr').eq(3).after('<tr><td>Added Row</td><td>Accountant</td><td>Test3</td><td>Test4</td><td>Test5</td><td>Test6</td></tr>');
            $("#example").trigger("update"); 
             
            console.log("new row added");
        }

В таблицу добавлена ​​новая строка, как показано ниже.

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

Любая помощь приветствуется.

Answer 1

Единственный способ переноса данных с одной страницы на другую - использование форм. Это означает, что вам нужна форма для захвата значений, тогда на следующей странице должен быть файл, содержащий язык на стороне сервера, например php, который будет захватывать данные формы, и вы можете использовать его там

<form action="new_page.php" method="get">
    <input type="hidden" name="new_row" id="new_row"/>
    <input type="submit" name="submit" value="Create row and move to next page"/>
</form>

Тогда ваша Javascript функция может быть

function addRow() {
        $('#example > tbody > tr').eq(3).after('<tr><td>Added Row</td><td>Accountant</td><td>Test3</td><td>Test4</td><td>Test5</td><td>Test6</td></tr>');
        $("#example").trigger("update"); 
        $("#new_row").val('<tr><td>Added Row</td><td>Accountant</td><td>Test3</td><td>Test4</td><td>Test5</td><td>Test6</td></tr>');
        console.log("new row added");
    }

, чтобы при вызове функции поле ввода содержало значение новой строки и могло использоваться на следующей странице следующим образом: ПРИМЕЧАНИЕ: I Я использую php

$myrow = $_GET["new_row"];

Который затем вы можете создать таблицу или использовать существующую таблицу и добавить новую строку:

echo '<table>';
...Original table content goes here
#Then append the final row
echo $myrow;
echo '</table>';