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.reload()。我还尝试过将数据表存储到var表中，并尝试使用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（）之后无法正确呈现。

Answer 1

在我的代码中，不必要地包含了draw，length和start参数。之所以这样做，是因为我注意到尽管尝试{{3，但当我尝试将数据参数作为函数返回时，这些项没有被传递（缺少这些参数导致数据库查询在后端失败）。 }}。

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

这是我最初的财产，价值没有更新；每当我使用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(),}

}

这是我注意到未通过绘制，开始和长度参数的地方。最初的问题包括我尝试过的另一种变体，我将其放在此处以使所有内容都清楚。

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调用中发送的数据参数进行更新，则确实需要将params作为函数返回，以便每次使用新的ajax调用时都会更新参数。 table.ajax.reload（）（否则，您将保留传递初始数据的权限）。但是，该函数应该传递DataTables的内部数据对象，因此，在发出请求时，DataTables会随请求发送一些参数。发送的参数在此处的文档中有详细说明：documentation saying that Datatbles would send them automatically

数据表ajax.reload（）和.clear（）不起作用

1 个答案: