How to add a new row in Jquery DataTable without losing new row while moving from one page to another

Question

I have a table containig data created using JqueryDataTable.

 function showGrid()
        {
           var table = $('#example').DataTable({
                stateSave: true,
                
                rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows grouping 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");
        }

I need to create a new row ina specific index. I used below code to make it.

 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");
        }

Anew row has been added to grid as below.

The issue is, newly created row is not retainining when moving from one page to another.

Any help will be appreciated.

score 0 · Answer 1 · answered Apr 26 '20 at 16:31

The only way to transfer data from one page to another is by using forms. Which means you need a form to capture the values then the next page should be a file that contains a server-side language e.g php that will capture the form data and you can use it there

<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>

Then your Javascript function could be

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");
    }

Such that when you call the function, the input field will hold the value of the new row and can be used in the next page this way: NOTE: I am using php

$myrow = $_GET["new_row"];

Which then you can create a table or use your existing table and append the new row:

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

Thanks for your response...My requirement is to maintain the new row on same page itself...For this, do we have an option in Datatable not to refresh data while move from one page to another page? — Sarat, Apr 27 '20 at 03:45
https://stackoverflow.com/a/61450661/13117070, try this solution that implements local storage in the browser — Cypherjac, Apr 27 '20 at 04:04

How to add a new row in Jquery DataTable without losing new row while moving from one page to another

1 Answers1