单击时使用 ajax 调用重新加载数据表数据

Posted 2023-05-07

【中文标题】单击时使用 ajax 调用重新加载数据表数据

【英文标题】：Reload datatable data with ajax call on click

【发布时间】：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/

【参考方案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/…

现在，它是正确的，并且与原始响应相同（但数据当然不同）。这是我的问题的更新主题：***.com/questions/20005816/…