【问题标题】:Reload datatable data with ajax call on click单击时使用 ajax 调用重新加载数据表数据
【发布时间】:2013-11-28 23:28:39
【问题描述】:

我有一个带有 ajax 调用的数据表。我这样形成表格:

var _initTable = function() {
    $('#datatables tr').not(':first').on('click', function() {
        var dateandtime = $(this).find(':nth-child(3)').text();
        window.location.href = '/results/detail/dateandtime/' + dateandtime;
    });
};

$('#datatables').dataTable({
     bProcessing  : true,
     sProcessing  : true,
     bServerSide  : true,
     sAjaxSource  : '/results/load-results',
     fnServerParams: function ( aoData ) {
         aoData.push( {"name": "quizid", "value": quizid },{ "name": "questionid", "value": questionid } );
     },
     aoColumnDefs : [{'bSortable' : false, 'aTargets' : ['no-sort']}], // make the actions column unsortable
     sPaginationType : 'full_numbers',
     fnDrawCallback  : function(oSettings) {
         _initTable();
     }
});

如您所见,我向我的 php 操作发送了 2 个参数。
现在我想在单击按钮时重新加载表格。所以我想要做的是再次调用ajax并发送其他参数(quizid会相同,但questionid会不同)。

我知道您有类似 oTable.fnReloadAjax(newUrl); 的内容,但我应该在 newUrl 参数处粘贴什么??

我做了一个 jsfiddle:http://jsfiddle.net/8TwS7/

【问题讨论】:

    标签: javascript php jquery ajax datatables


    【解决方案1】:

    您应该能够通过使用 fnServerData 而不是 fnServerParams 来完成此操作

    var oTable = $('#datatables').dataTable({
         bProcessing  : true,
         sProcessing  : true,
         bServerSide  : true,
         sAjaxSource  : '/results/load-results',
    "fnServerData": function ( sSource, aoData, fnCallback ) {
                /* Add some extra data to the sender */
                aoData.push( { "name": "quizid", "value": quizid } );
                aoData.push( { "name": "question_id", "value": question_id } );
                $.getJSON( sSource, aoData, function () { 
                    /* Do whatever additional processing you want on the callback, then tell DataTables */              
                }).done(function(json){
                    fnCallback(json);
                            }).fail(function(xhr, err){ 
                    var responseTitle= $(xhr.responseText).filter('title').get(0);
                    alert($(responseTitle).text() + "\n" + formatErrorMessage(xhr, err) ); 
                });
            },      
        });
    

    您应该能够然后调用一个点击函数来重绘您的表格,使用 fnDraw API 调用我们在数据表初始化时创建的变量没有问题

    $('#somelement').on('click', function(){
    
            oTable.fnDraw();
        });
    

    【讨论】:

    • 然后我得到这个错误:未捕获的类型错误:无法读取 null 的属性 'oFeatures'
    • 你必须通过 jsfiddle 发布你的整个源代码才能解决这个问题......有些东西出了问题,如果不查看你所有的源代码,我只会猜测
    • 好的,我做了一个jsfiddle。它不起作用并且链接不正确,但您可以看到我的代码看起来如何...... jsfiddle.net/8TwS7
    • 将 php 排除在外...“/results/load-results”返回什么?我现在猜测 aaData 格式错误,在此页面上向下滚动到服务器响应,它应该与此格式匹配 datatables.net/release-datatables/examples/server_side/…
    • 现在,它是正确的,并且与原始响应相同(但数据当然不同)。这是我的问题的更新主题:stackoverflow.com/questions/20005816/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-07
    • 1970-01-01
    • 2019-09-09
    • 2016-12-01
    • 1970-01-01
    相关资源
    最近更新 更多