使用 asp.net webmethod (ajax) 填充的 Jquery 数据表

Question

通常我可以使用带有 webmethod 的 ajax 来填充某些东西或表格，但我找不到任何 jquery 数据表插件的方法。

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

    }
});

这是我的表格工作代码。以下是我无法适应的数据表插件的示例代码。

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

https://github.com/cmatskas/DataTablesServerSide 里面有一些 asmx 服务。但是它使用 aoData 发送请求参数，aspx 中的 webmethod 不接受。

在 DataTables 示例 javascipt 代码中，只有一个用于 ajax url 的字符串，如何从 webmethod 更改和检索数据然后显示它们？

对不起我的英语，希望我能解释一下......

Answer 1

对于数据表，您有ajax 选项来加载数据。因此，当您在 ajax 参数中实例化数据表时，请将 url 提供给您的 webmethod：

$(文档).ready(函数 () { $('#example').dataTable({ "ajax": "/Logs.aspx/Report" }); });

还要确保您的 WebMethod 返回 Json 而不是 string：

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