数据表 ajax.reload() 和 .clear() 不工作

Posted 2023-05-09

【中文标题】数据表 ajax.reload() 和 .clear() 不工作

【英文标题】：Datatables ajax.reload() and .clear() Not Working

【发布时间】：2019-04-02 18:52:48

【问题描述】：

我有一个使用 bootstrap 3 创建的选项卡部分。对于其中一个选项卡，选项卡内容是一个数据表。数据是在服务器端生成的，并且在初始加载时工作正常。但是，我试图在 onchange 函数中使用 ajax.reload() ，并且数据没有刷新。我也尝试使用 clear() 方法，但数据没有被清除。我已经验证该函数正在触发，并且返回的 AJAX 响应是有效的 JSON 并且不是空的。我的控制台中没有错误，只是没有任何反应。

我正在使用 Datatables 1.10，源直接来自 cdn (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js)。

我已经在 *** 和 Datatbles 论坛上搜索过这个问题。其他人已经有了它，并且接受的解决方案似乎是$('#TableID').DataTable().ajax.reload()，我正在这样做。我还尝试将数据表存储到 var table 并尝试 table.ajax.reload()，并传入回调函数并将页面刷新显式设置为 true。我从回调函数返回日志，仍然没有错误，但没有任何变化。

html：

<div id="tab_datatable" class="tab-pane fade">          
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Year</th>
                <th>Course</th>
                <th>Title</th>
                <th>Enrollment</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

我的 js 代码创建了表格，效果很好：

$( document ).ready(function() 
    var $table = $('#example').DataTable(
    scrollCollapse: false,
    paging: true,
    pagingType: 'simple_numbers',
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
    processing: true,
    serverSide: true,
    ajax: 
        url: myURL,
        data: 
            campus: $campus.val(),
            college: $college.val(),
            year: $term.val(),
            draw: parseInt(1),
            length: (10),
            start: parseInt(1)
        
    ,
    searching: false,
    info: false,

);
);

表格在“示例” div 中正确呈现。

我有一个 updatePage() 函数，当页面上的三个菜单选项之一发生变化时会触发该函数。

$(document).on('change', '.dynamic', function()
    updatePage();
);

//Updates dynamic content on page
function updatePage()
       
    //sessionStorage
    sesssionStateStorage('campus', $campus.val());
    sesssionStateStorage('college', $college.val());
    sesssionStateStorage('term', $term.val());

    console.log($term.val()); //confirming that value is updating

    //Refresh datatable
    console.log($table);  //Shows table object so I know it exists

   //$table.clear();   //This does't work;  no errors but no change
   //$table.ajax.reload() //doesn't work; no errors but no change
   //$('#example').DataTable().ajax.reload();  //doesn't work; no errors but no change
    $('#example').DataTable().ajax.reload(test(), true);  //Confirming that I see test logging from test() function, but data still doesn't update



function test()

   console.log('in test');
   console.log('table object: ' + $table)

非常感谢任何帮助。

编辑：忘记包括我也在监控控制台中的网络调用，当其中一个菜单值更改时，我确实看到触发了新的 AJAX 调用并返回了正确的数据。所以问题似乎只是在 ajax.reload() 之后表格没有正确呈现。

【参考方案1】：

在我的代码中，我不必要地包含了 draw、length 和 start 参数。我这样做是因为我注意到当我尝试将我的数据参数作为函数返回时，这些项目没有被传递（缺少这些参数导致我的数据库查询在后端失败），尽管documentation saying that Datatbles would send them automatically .

发生这种情况是因为我没有将数据对象传递给我创建的函数。

这是我原来的，值没有更新；每当我使用 table.ajax.reload() 时，初始数据仍在传递：

ajax: 
    url: myURL,
    data: 
        campus: $campus.val(),
        college: $college.val(),
        year: $term.val()
    

这是我接下来尝试的，将参数作为函数返回：

ajax: 
    url: myURL,
    data:  function() 
               return  campus: $campus.val(), college: $college.val(), year: $term.val(),

这是我注意到 draw、start 和 length 参数没有被传递的地方。最初的问题包括我尝试过的另一个变体，我将把它放在这里以便一切都清楚。

ajax: 
    url: myURL,
    data: 
        campus: $campus.val(),
        college: $college.val(),
        year: $term.val(),
        draw: parseInt(1),
        length: (10),
        start: parseInt(1)
    
,

这是正确的方法：

    ajax: 
        url: myURL,
        data: function (d) 
            d.campus = $campus.val();
            d.college = $college.val();
            d.year = $term.val();
               
    

因此，如果您在 DataTables 中使用服务器端处理，并且您在 ajax 调用中发送的数据参数会更新，您确实需要将参数作为函数返回，以便每次使用新的 ajax 调用时它都会更新table.ajax.reload() （否则，您将继续传递初始数据）。但是，该函数应该传递DataTables的内部数据对象，所以当请求发出时，DataTables会随请求发送一些参数。发送的参数在此处的文档中有详细说明：https://datatables.net/manual/server-side

【讨论】：

很好地找出原因，并在一个完整的答案中分享您的推理。更多的人应该这样做！