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

对于datatable，您可以选择ajax来加载数据。因此，当您在ajax参数中实例化数据表时，请为您的webmethod提供URL：

$（document）.ready（function（）{ $（＆＃39;＃示例＆＃39）。dataTable中（{ ＆＃34; ajax＆＃34;：＆＃34; /Logs.aspx/Report" }）; }）;

另外，请确保WebMethod正在返回Json，而不是string：

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

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

1 个答案: