Jquery Datatables 从服务器返回附加信息答案

【问题标题】：Jquery Datatables return additional information from serverJquery Datatables 从服务器返回附加信息
【发布时间】：2011-08-30 17:18:54
【问题描述】：

使用 JQuery 数据表，一切顺利。

我已经研究了如何将附加信息从客户端发送到服务器。现在，我想回到另一条路。

那么，我如何将额外信息从服务器发送到客户端。我原以为我可以在返回的 JSON 中添加一个额外的条目并将其拉出某个地方。我可能想发回的一项是服务器处理响应所需的时间。然后我可以向用户显示此信息。

任何帮助将不胜感激。谢谢

【问题讨论】：

嘿李，我正在研究如何使用 fnServerData 从客户端向服务器发送附加信息。你能帮我解决一下吗！

标签： jquery client datatables

【解决方案1】：

我认为你做对了一切。您只需要在 JSON 对象中附加额外的数据服务器端，然后在“fnServerData”中获取它。您可以将此代码添加到初始化对象中：

        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.getJSON( sSource, aoData, function (json) {
//Here you can do whatever you want with the additional data
                console.dir(json);
//Call the standard callback to redraw the table
                fnCallback(json);
            } );
        }

服务器端您可以添加任意数量的参数：通常您有一个带有 3 个参数的 json，“iTotalRecords”（总行数）、“iTotalDisplayRecords”（如果您使用过滤器，则过滤总数）和 aaData（关联阵列与行）。如果您添加例如“iProcessingTime”（处理服务器端所花费的时间）您可以这样做：

        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.getJSON( sSource, aoData, function (json) {
//take the processing time and put it in a div
                $('#processingTime').html(json.iProcessingTime);
//pass the data to the standard callback and draw the table
                fnCallback(json);
            } );
        }

这是你需要的吗？

【讨论】：

@nicola：您能帮我解决如何将参数从客户端发送到服务器。我试图将我的 html 页面上选定组合框的值传递给控制器，该控制器是我的 AjaxSource 到我的数据表。

【解决方案2】：

还可以使用“fnInitComplete”函数访问 JSON 文件中的信息，该函数在表格的绘制事件完成后调用（包括数据行）。

  $('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      //Do something with json variable
    }
  });

【讨论】：

这就是我要找的。span>

【解决方案3】：

"fnDrawCallback": function( oSettings ) {
    console.log(oSettings.json);//do whatever with your custom response
  },

【讨论】：

这正是我所需要的——上述建议对我不起作用。我需要的只是一个回调来处理从服务器获取的额外数据而不影响数据表的 ajax 功能。

【解决方案4】：

@Nicola Peluchetti 的回答是正确的。但是，如果您遵循此示例 http://datatables.net/release-datatables/examples/server_side/post.html 并且（出于某种原因）不想使用 getJSON ，这也可以

        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.ajax({
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": function(json){
                    $('#processingTime').html(json.iProcessingTime); // iProcessingTime is the variable that we added in JSON at the server side
                    fnCallback(json);
                }
            });               
        }

【讨论】：

【解决方案5】：

上述建议没有帮助。

我有一个 ajax 服务器端的可分页实现。当用户输入新的搜索词时，它必须刷新，因此不能使用“fnInitComplete”，因为它只会在 DataTable 对象初始化时触发一次。

覆盖 fnServerData 也不起作用。

因此，我通过 dataSrc 从 JSON 中获取 iProcessingTime 来结束实现它：

var table = $('#pkgTable').DataTable({
    "processing" : true,
      "serverSide" : true,
      "sPaginationType" : "jPaginator",
      "ajax": {
          "url" : urlStr,
          "type" : "POST",
          "dataSrc": function(json) {
            var iProcessingTimeMS = json.iProcessingTime;
            var iProcessingTimeS = iProcessingTimeMS/1000;
            $("#processingTime").html("Search Time: " + iProcessingTimeMS + " ms. " + iProcessingTimeS + " s.");
          return json.aaData;
        }
      },
      "oLanguage": {
            "sProcessing":   "<span style='color: red; font-weight: bold'>Please Wait...</span>",
            "sZeroRecords":  "No Records Found...",
            "sSearch":       "Search All:",
            "sUrl":          "",
            "oPaginate": {
                             "sFirst"    : "<b>&lt;&lt;</b>",
                             "sLast"     : "<b>&gt;&gt;</b>",
                             "sPrevious" : "<b>&lt;</b>",
                             "sNext"     : "<b>&gt;</b>"
                    },
            "sLengthMenu": 'Display <select>' +
                    '<option value="10">10</option>' +
                    '<option value="20">20</option>' +
                    '<option value="50">50</option>' +
                    '<option value="100">100</option>' +
                    '</select> records'
        }
});

【讨论】：

【解决方案6】：

<div id="category"></div>

$('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      $('#category').html(json.category);
    }
  });

这对我来说似乎很好。

【讨论】：