使用asp.net webmethod（ajax）填充的Jquery数据表

Question

Normally I can use ajax with webmethod for populate something or table, but I couldn't find any way for jquery datatables plug-in.

$.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) {

    }
});

This my working code for tables. Below one is the sample code for datatable plugin that I could not adapt.

var handleRecords = function () {

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

There are something for asmx service in there https://github.com/cmatskas/DataTablesServerSide . But it sends request parameters with aoData that webmethod in aspx does not accept.

In DataTables sample javascipt codes, only one string for ajax url, how can I change and retrieve data from webmethod then show them?

Sorry for my english, and hope I can explain it...

Answer 1

In the case of datatable you got ajax option to load data. So when you are instantiating the datatable in ajax parameter provide the url to your webmethod:

$(document).ready(function () { $('#example').dataTable({ "ajax": "/Logs.aspx/Report" }); });

Also make sure your WebMethod is returning Json as opposed to string :

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