jQuery Datatables Server side pagination with custom HTTP POST request and response

Question

I have worked on one issue for last two days. I'm using jQuery and DataTables in a page, which fetches data from a server and populates tables quite happily. I need to make a change for requests from dataTables library to fetch data from the server happen.

Is it possible to make a jquery ajax post request without defined param list mention in link below?

https://datatables.net/usage/server-side

This is my json POST request:

{"page_number":1,"page_size":10}

and this is my server response:

{
 "status": 200,
 "message": "Users retrieved successfully.",
  "users": [Assumelistofusers],
  "total_count": 50,
  "total_page_count": 5
}

I have found that, in YUI Library for DataTable Control (beta), there is good example of server side pagination. refer the link:

http://examples.mashupguide.net/lib/yui_2.3.0/examples/datatable/dt_serverpagination.html

Answer 1

我不确定你为什么要这样做，因为如果你明确排除这些因某种原因而存在的参数，你将失去所有的过滤和排序。

但是，是的，您可以使用 fnServerData 函数来定义对服务器端数据源的调用和方法。

$('#dt').dataTable({
"bServerSide": true,
"sAjaxSource": "my_serverdata.script",
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
  var mydata=[]
  mydata.push( { "name": "page_number", "value": 1 } );
  mydata.push( { "name": "page_size", "value": 10 } );
   //here comes a basic jQuery helper function to handle your ajax call.
   //of course you can replace it with any other ajax handler
   //has nothing to do with dataTables
   $.ajax({
    "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": mydata,
    "success": fnCallback
  });
}
});

这里通常的数组aoData完全被自定义数组覆盖mydata。这将发布到您的服务器：

 page_number    1
 page_size  10

现在您只需要为成功处理程序编写一个函数，它将服务器响应映射到预期的变量（iTotalRecords = total_count等aaData = users），然后调用fnCallback来处理所有内容。

当然，这需要一些调整来找出如何填写预期的服务器响应。但这应该有效。

由于 ajax，我无法制作 Fiddle 或 Plunker。

请注意，只有当您无法更改服务器端脚本时，这才有意义。另请注意，以与我创建新数组 mydata 相同的方式，您也可以将额外的发布数据推送到aoData服务器端并忽略其他参数。

顺便说一句：返回total_page_count有点无用，因为这可以很容易地在客户端计算。