Может ли кто-нибудь показать мне, как использовать fnServerData ?.

$(document).ready( function() {
  $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "xhr.php",
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
      oSettings.jqXHR = $.ajax( {
        "dataType": 'json',
        "type": "POST",
        "url": sSource,
        "data": aoData,
        "success": fnCallback
      } );
    }
  } );
} );

Ниже мой вызов Ajax, я хочу заменить ajax call на fnServerData.

   $.ajax({
        type: 'GET',
        url: url,
        jsonp: true,
        contentType: "application/json",
        dataType: 'jsonp',
        success: function (data) {
            $.each(data.value, function(i,item){
                table.fnAddData(item);
            });
        },
        error: function (e) {
            console.log(e.message);
        }
    });

http://datatables.net/ref#fnServerData

Что такое sSource, fnCallback и oSettings ?. Может ли кто-нибудь показать мне, как использовать fnServerData ?.

5
Shane 1 Мар 2014 в 01:04

3 ответа

Лучший ответ

SSource, fnCallback и oSettings генерируются Datatables.

SSource - это URL-адрес вашего вызова ajax. Когда вы инициализируете datatable, вы указываете это в sAjaxSource. Таким образом, вы должны передать свой URL-адрес var как sAjaxSource.

OSettings создается и поддерживается datatables js. В нем хранится важная информация о состоянии вашей таблицы данных. Подробная документация доступна здесь: https://datatables.net/docs/DataTables/1.9.0 /DataTable.models.oSettings.html

Однако я думаю, что ваша функция успеха не нужна. Вы должны указать aoColumns в качестве опции во время инициализации, и тогда таблицы данных будут заполнять данные за вас.

$(document).ready( function() {
 $('#example').dataTable( {
   "aoColumns": [
       { "mData": "engine" },
       { "mData": "browser" },
       { "mData": "platform.inner" },
       { "mData": "platform.details.0" },
       { "mData": "platform.details.1" }
     ]
   }),
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": url,
   "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
     oSettings.jqXHR = $.ajax( {
       "dataType": 'json',
       "type": "POST",
       "url": sSource,
       "data": aoData,
       "success": fnCallback,
       "error": function (e) {
           console.log(e.message);
       }
     });
   }
 });
});

Дополнительная информация о aoColumns здесь: http://www.datatables.net/usage/columns. Также посмотрите примеры на странице таблиц данных. Для всего, что вам нужно, должен быть пример: http://www.datatables.net/usage/columns

С уважением, Саз


6
SazD 1 Мар 2014 в 16:54

Если вы хотите отправить дополнительные поля с клиента на сервер, вы можете добавить свойства к объекту aoData следующим образом:

"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
     aoData.push({ "name": "Input1", "value": "xx" });

     oSettings.jqXHR = $.ajax({
         "dataType": 'json',
         "type": "POST",
         "url": sSource,
         "data": aoData,
         "success": fnCallback
     });
},
0
Gyrocode.com 5 Авг 2015 в 03:51
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {                               
    oSettings.jqXHR = $.post( sSource, aoData, function( data ) {               
        //alert(data.toSource());

        if ( ! parseInt(data.iTotalRecords) > 0 )
            alert('ZeroRecords');

        fnCallback(data);
        //fnCustomCallback(data);

    },'json');
}
0
Gyrocode.com 5 Авг 2015 в 03:50