JQuery Datatables, заселяющий asp.net webmethod (ajax)

Question

Обычно я могу использовать ajax с webmethod для заполнения чего-либо или таблицы, но я не смог найти никакого способа для подключаемого модуля djatery datatables.

$.ajax({ 
    type: "POST", 
    url: "Logs.aspx/Report", 
    data: '{user: ' + user + '}', 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (data) { 
     var list = eval(data.d); 
     $('#tablereport tbody').empty(); 
     $.each(list, function (i, item) { 
      var $tr = $('<tr>').append(
         $('<td>').append(item.type), 
         $('<td>').append(item.id), 
         $('<td>').append(item.table), 
         $('<td>').text(item.name), 
         $('<td>').append(item.date), 
         $('<td>').append(item.ip) 
          ).appendTo('#tablereport tbody'); 
     }); 
     Metronic.unblockUI(el); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 

    } 
}); 

Этот мой рабочий код для таблиц. Ниже приведен пример кода для datatable plugin, который я не мог адаптировать.

вар handleRecords = функция() {

var grid = new Datatable(); 

grid.init({ 
    src: $("#datatable_ajax"), 
    onSuccess: function (grid) { 
     // execute some code after table records loaded 
    }, 
    onError: function (grid) { 
     // execute some code on network or other general error 
    }, 
    onDataLoad: function(grid) { 
     // execute some code on ajax data load 
    }, 
    loadingMessage: 'Loading...', 
    dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options 

     // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout 
     // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js). 
     // So when dropdowns used the scrollable div should be removed. 
     //"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", 

     "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie. 

     "lengthMenu": [ 
      [10, 20, 50, 100, 150, -1], 
      [10, 20, 50, 100, 150, "All"] // change per page values here 
     ], 
     "pageLength": 10, // default record count per page 
     "ajax": { 
      "url": "demo/table_ajax.php", // ajax source 
     }, 
     "order": [ 
      [1, "asc"] 
     ]// set first column as a default sort by asc 
    } 
}); 

// handle group actionsubmit button click 
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) { 
    e.preventDefault(); 
    var action = $(".table-group-action-input", grid.getTableWrapper()); 
    if (action.val() != "" && grid.getSelectedRowsCount() > 0) { 
     grid.setAjaxParam("customActionType", "group_action"); 
     grid.setAjaxParam("customActionName", action.val()); 
     grid.setAjaxParam("id", grid.getSelectedRows()); 
     grid.getDataTable().ajax.reload(); 
     grid.clearAjaxParams(); 
    } else if (action.val() == "") { 
     Metronic.alert({ 
      type: 'danger', 
      icon: 'warning', 
      message: 'Please select an action', 
      container: grid.getTableWrapper(), 
      place: 'prepend' 
     }); 
    } else if (grid.getSelectedRowsCount() === 0) { 
     Metronic.alert({ 
      type: 'danger', 
      icon: 'warning', 
      message: 'No record selected', 
      container: grid.getTableWrapper(), 
      place: 'prepend' 
     }); 
    } 
}); 
} 

Есть кое-что для ASMX службы в там https://github.com/cmatskas/DataTablesServerSide. Но он отправляет параметры запроса с aoData, что веб-метод в aspx не принимает.

В примерах кода javascipt в DataTables используется только одна строка для URL-адреса ajax, как я могу изменить и извлечь данные из webmethod, а затем показать их?

Извините за мой английский, и надеюсь, что я могу это объяснить ...

Answer 1

В случае DataTable вы получили ajax возможность загрузки данных. Итак, когда вы инстанцирования DataTable в АЯКС параметра обеспечивают URL для вашего веб-метод:

$ (документ) .ready (функция() { $ ('# пример') DataTable ({ "Аякса".: "/Logs.aspx/Report" }); });

Кроме того, убедитесь ваш WebMethod возвращается Json в противоположность string:

string jsondata = JsonConvert.SerializeObject(data); 
Response.ContentType= "application/json"; 
return jsondata;