如何修复我的 DataTable 以便 stateSave 能够正常运行？

Question

我正在尝试在 DataTable 上使用 stateSave，以便当用户选择一个项目时，它会返回到页面，将 DataTable 放在项目所在的页面上。我似乎无法让 stateSave 为我工作。它似乎总是重置回第一页。我尝试放置

activeTable.draw(false);

和

inactiveTable.draw(false);

，但没有成功。我看到每次构建表时数据都会被重置，我相信这会覆盖 stateSave。我已经评论了

.clear()

但这也没有帮助。我尝试在不使用

.draw()

的情况下检查填充表，但我发现如果没有

.draw()

，则数据表不会显示行。

window.onload = Init;
var activeCnt = 0, inactiveCnt = 0;
var activeTable;


function Init() {
    activeTable = $('#activeTable').DataTable({
        order: [[0, 'asc']],
        columnDefs: [
            { targets: -1, className: 'text-center' }
        ],
        stateSave: true
    });

    inactiveTable = $('#inactiveTable').DataTable({
        order: [[0, 'asc']],
        columnDefs: [
            { targets: -1, className: 'text-center' },
            { targets: -1, className: 'text-center' }
        ],
        stateSave: true
    });

    //Get view
    GetProjectsList();
}

function GetProjectsList() {
    $.ajax({
        url: "/Projects/GetProjects",
        type: 'GET',
        success: function (dta) {
            view = dta;

            PopulateProjectTable();
        }
    });
}

function PopulateProjectTable() {
    activeCnt = 0;
    inactiveCnt = 0;

    // clear project table data
    activeTable.clear();
    inactiveTable.clear();

    for (var i = 0; i < view.projects.length; i++) {
        var prj = view.projects[i];
        var hrTtl = (prj.Sums != null) ? prj.Sums.PrjTotalHours : 0;

        // populate the table
        if (prj.PrjStatusID == 1) { // if project belongs to the active table
            activeTable.row.add([prj.PrjName, prj.PrjProgressName, prj.PrjStartDateStr, prj.PrjEndDateStr, "$" + prj.PrjBudgetAmt + ".00", "$" + prj.PrjBudgetAmt + ".00", hrTtl + " hrs.",
            `<i class="fas fa-search add-pointer text-primary" onclick="ViewProject(${prj.PrjID})"></i><i class="fas fa-edit add-pointer text-primary" onclick="EditProject(${prj.PrjID})" data-bs-toggle="modal" data-bs-target="#modal-prj-details"></i>`]);
            activeCnt++;
        }
        else { // inactive table
            inactiveTable.row.add([prj.PrjName, prj.PrjProgressName, prj.PrjStartDateStr, prj.PrjEndDateStr, "$" + prj.PrjBudgetAmt + ".00", hrTtl + " hrs.", prj.PrjStatusName,
            `<i class="fas fa-search add-pointer text-primary" onclick="ViewProject(${prj.PrjID})"></i><i class="fas fa-edit no-click text-secondary"></i>`]);
            inactiveCnt++;
        }
    }
    
    activeTable.draw(false);
    inactiveTable.draw(false);

    document.getElementById("actCnt").innerHTML = activeCnt;
    document.getElementById("inactCnt").innerHTML = inactiveCnt;


}

Answer 1

您可以重新安排逻辑，以便您的 DataTable 使用对 Ajax 数据源的内置支持。这将允许您使用您想要使用的保存的状态数据。

请参阅此处，了解 DataTables Ajax 语法的概述。

请参阅此处了解 Ajax 示例。

您当前的方法会初始化数据表 - 然后在初始化表后，它会使用 Ajax 数据填充这些表 - 这会使可能已保存的任何状态无效。

通过使用内置的 Ajax 方法，您的数据将作为初始化过程的一部分进行填充，并且可以在初始化期间使用保存的状态来恢复相关结果页面。

这是一个基本的演示，但有一些注意点：

问题中没有JSON数据，所以我不得不发明一些。

我没有你们的服务器端 Ajax 提供程序，所以我在代码中伪造了这一部分。请参阅

callback( getActiveProjects(view) )

。这并不完全是您所需要的，因为您的 JSON 是由 Ajax 传递的（不是我的硬编码数据）。但基本结构可供您适应。

让 DataTables 决定如何从 JSON 映射到每个特定列 - 请参阅我添加的
columns: [ ... ]
```
 部分。
```
您有其他数据格式 - 例如，您的
<i>
```
 链接和 FontAwesome 图标。您可以使用
```
列渲染器，作为处理此问题的一种方法。
我没有使用过你的两张表 - 我的演示只需要一张表来展示我的方法。您的逻辑需要考虑如何拆分 2 个表的 JSON 数据。

但要点是，现在将尊重

stateSave: true

 选项。

这是代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <link href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
        <script src="https://cdn.datatables.net/2.0.1/js/dataTables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
    </head>
    <body>
        <div style="margin: 20px;">
            <table id="activeTable" class="display dataTable cell-border" style="width:100%">
                <thead>
                    <tr>
                        <th>PrjName</th>
                        <th>PrjProgressName</th>
                        <th>PrjStartDateStr</th>
                        <th>PrjEndDateStr</th>
                        <th>PrjBudgetAmt</th>
                        <th>PrjBudgetAmt</th>
                        <th>hrTtl</th>
                        <th>PrjID</th>
                    </tr>
                </thead>
            </table>
            <div id="actCnt"></div>
        </div>
        <script>
            $(document).ready(function() {
            
            function Init() {
            
                var view = { "projects": [
                    { "PrjName": "a", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "b", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "c", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "d", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "e", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "f", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "g", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "h", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "i", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "j", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "k", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 },
                    { "PrjName": "l", "PrjProgressName": "b", "PrjStartDateStr": "c", "PrjEndDateStr": "d", "PrjBudgetAmt": 123, "hrTtl": 234, "PrjID": "foo", "PrjStatusID": 1 }
                ] } ;
            
                activeTable = $('#activeTable').DataTable({
                    order: [[0, 'asc']],
                    columnDefs: [
                        { targets: -1, className: 'text-center' }
                    ],
                    columns: [
                        { data: 'PrjName' },
                        { data: 'PrjProgressName' },
                        { data: 'PrjStartDateStr' },
                        { data: 'PrjEndDateStr' },
                        { data: 'PrjBudgetAmt' },
                        { data: 'PrjBudgetAmt' },
                        { data: 'hrTtl' },
                        { data: 'PrjID' }
                    ],
                    ajax: function (data, callback, settings) {
                        callback( getActiveProjects(view) );
                    },
                    stateSave: true
                });
            
            }
            
            
            function getActiveProjects(view) {
                var actives = view.projects.filter(function (project) {
                  return project.PrjStatusID == 1;
                });
                return { "data": actives };
            }
            
            Init();
            
            
            } );
            
        </script>
    </body>
</html>

因此，这展示了解决您的问题的一种方法 - 但它确实涉及重大的重组，因此可能需要您研究已经指出的 DataTables 的一些额外功能。 Stack Overflow 上有许多问题和答案，如果您遇到困难，可以帮助执行其他步骤。

最后一点：在数据表中通常有不止一种方法可以实现您想要的效果。所以可能还有其他可以接受的方法。

如何修复我的 DataTable 以便 stateSave 能够正常运行？

问题描述投票：0回答：1

1个回答

最新问题

如何修复我的 DataTable 以便 stateSave 能够正常运行？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1