数据表ajax。重载（）和。clear（）不工作

Question

我有一个标签部分创建与引导3.对于其中一个选项卡，选项卡内容是可数据的。数据在服务器端生成，在初始负载下工作正常。但是，我试图在onChange函数内部使用ajax.reload（），并且数据不刷新。我也尝试过使用Clear（）方法，但是数据没有被清除。我已经验证了函数正在启动，并且返回的AJAX响应是有效的JSON，而不是空的。我的控制台没有错误，只是什么都没发生。

我使用的是Datatables 1.10，源代码直接来自cdn(https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js).

我在StackOverflow和Datatbles论坛上搜索过这个问题。其他人也有过，而公认的解决方案似乎是$（“#TableID”）。DataTable（）。AJAX重新加载（），我正在执行此操作。我还尝试将数据表存储到var表和trying表中。AJAXreload（），并传入回调函数，并显式将页面刷新设置为true。我从回调函数返回日志，仍然没有错误，但没有更改。

超文本标记语言：

<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之后，表没有正确呈现。重新加载（）。

Answer 1

在我的代码中，我不必要地包含了draw、length和start参数。我这样做是因为我注意到，当我尝试将数据参数作为函数返回时，这些项没有被传递（缺少这些参数导致我的数据库查询在后端失败），尽管文档中说Datatbles会自动发送它们。

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

这是我最初拥有的，并且这些值没有更新；每当我用桌子的时候。AJAX重新加载（），仍在传递初始数据：

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(),}

}

这就是我注意到绘制、开始和长度参数没有被传递的地方。最初的问题包括我尝试的另一个变体，我将把它放在这里，这样一切都清楚了。

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调用更新中发送的数据参数，您确实需要将参数作为函数返回，以便每次使用<--plhd--0/进行新的ajax调用时它都会更新。>（）（否则，您将继续传递初始数据）。但是，该函数应该传递DataTables的内部数据对象，因此当发出请求时，DataTables将随请求发送一些参数。发送的参数在这里的留档中详细说明：https://datatables.net/manual/server-side