如何在 Jquery DataTable 中添加新行而不会在从一页移动到另一页时丢失新行

Posted 2023-05-09

【中文标题】如何在 Jquery DataTable 中添加新行而不会在从一页移动到另一页时丢失新行

【英文标题】：How to add a new row in Jquery DataTable without losing new row while moving from one page to another

【发布时间】：2020-08-10 03:08:04

【问题描述】：

我有一个使用 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");
        

我需要在特定索引中创建一个新行。我使用下面的代码来制作它。

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

新行已添加到网格中，如下所示。

问题是，从一页移动到另一页时，新创建的行没有保留。

任何帮助将不胜感激。

【参考方案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");
    

这样当你调用函数时，输入字段将保存新行的值，并且可以这样在下一页中使用： 注意：我使用的是 php

$myrow = $_GET["new_row"];

然后您可以创建一个表或使用现有表并附加新行：

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

【讨论】：

感谢您的回复...我的要求是在同一页面本身上维护新行...为此，我们是否可以在 Datatable 中选择在从一页移动到时不刷新数据另一个页面？

***.com/a/61450661/13117070，试试这个在浏览器中实现本地存储的方案