Jquery数据表从服务器返回其他信息

时间:2021-11-01 14:24:52

using JQuery Datatables and all is going well.

使用JQuery Datatables一切顺利。

I've worked out how to send addtional information from the client to the server. Now, I want to go back the other way.

我已经研究了如何从客户端向服务器发送附加信息。现在,我想回到另一个方向。

So, how do I send extra information from the server to the client. I would have thought I could add an extra entry in the returned JSON and pull it out somewhere. One item I'd perhaps like to send back is how long the server took to handle the response. I can then show this information to the user.

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

Any help would be much appreciated. Thanks

任何帮助将非常感激。谢谢

6 个解决方案

#1


16  

I think you got quite everything right. You just need to attach the additional data server side in the JSON object and then get it in "fnServerData". You can add this code to the inizialization object:

我觉得你说的一切都很对。您只需将附加数据服务器端附加到JSON对象中,然后在“fnServerData”中获取它。您可以将此代码添加到inizialization对象:

        "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);
            } );
        }

Server side you can add as many parameters as you want: Usually you have a json with 3 parameters "iTotalRecords" (total number of rows), "iTotalDisplayRecords" (Filtered total if you are using filters) and aaData (An associative array with the rows). If you add for example "iProcessingTime" (time it took to process server side) You could do:

服务器端你可以根据需要添加任意数量的参数:通常你有一个带有3个参数“iTotalRecords”(总行数)的json,“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);
            } );
        }

Is this what you need?

这是你需要的吗?

#2


3  

It is also possible to access the information from the JSON file using the "fnInitComplete" function, which is called after the draw event of the table is completed (including datarows).

也可以使用“fnInitComplete”函数从JSON文件访问信息,该函数在表的绘制事件完成后调用(包括数据行)。

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

#3


2  

@Nicola Peluchetti's answer is right. But if you are following this example http://datatables.net/release-datatables/examples/server_side/post.html and do not (for some reason) want to use getJSON , This works too

@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);
                }
            });               
        }

#4


1  

The above suggestions didn't help.

以上建议没有帮助。

I have an ajax server-side, pageable implementation. As the user enters new search words it has to refresh, therefore using "fnInitComplete" is not an option, since it only triggers once, when the DataTable object is initialized.

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

Overriding fnServerData didn't work either.

覆盖fnServerData也不起作用。

So instead I ended implementing it by grabbing the iProcessingTime from JSON via the dataSrc:

因此,我通过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'
        }
});

#5


1  

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

#6


0  

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

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

This seems to work fine for me.

这似乎对我来说很好。

#1


16  

I think you got quite everything right. You just need to attach the additional data server side in the JSON object and then get it in "fnServerData". You can add this code to the inizialization object:

我觉得你说的一切都很对。您只需将附加数据服务器端附加到JSON对象中,然后在“fnServerData”中获取它。您可以将此代码添加到inizialization对象:

        "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);
            } );
        }

Server side you can add as many parameters as you want: Usually you have a json with 3 parameters "iTotalRecords" (total number of rows), "iTotalDisplayRecords" (Filtered total if you are using filters) and aaData (An associative array with the rows). If you add for example "iProcessingTime" (time it took to process server side) You could do:

服务器端你可以根据需要添加任意数量的参数:通常你有一个带有3个参数“iTotalRecords”(总行数)的json,“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);
            } );
        }

Is this what you need?

这是你需要的吗?

#2


3  

It is also possible to access the information from the JSON file using the "fnInitComplete" function, which is called after the draw event of the table is completed (including datarows).

也可以使用“fnInitComplete”函数从JSON文件访问信息,该函数在表的绘制事件完成后调用(包括数据行)。

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

#3


2  

@Nicola Peluchetti's answer is right. But if you are following this example http://datatables.net/release-datatables/examples/server_side/post.html and do not (for some reason) want to use getJSON , This works too

@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);
                }
            });               
        }

#4


1  

The above suggestions didn't help.

以上建议没有帮助。

I have an ajax server-side, pageable implementation. As the user enters new search words it has to refresh, therefore using "fnInitComplete" is not an option, since it only triggers once, when the DataTable object is initialized.

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

Overriding fnServerData didn't work either.

覆盖fnServerData也不起作用。

So instead I ended implementing it by grabbing the iProcessingTime from JSON via the dataSrc:

因此,我通过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'
        }
});

#5


1  

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

#6


0  

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

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

This seems to work fine for me.

这似乎对我来说很好。