无法使用Datatables jquery

时间:2015-09-02 05:15:57

标签: jquery datatable datatables

我无法将数据填充到数据表中。我可以在console.log(data)中接收数据。但是如何将数据填充到数据表中。我正在使用dataTables.js并从ajax从服务器端获取数据。

$(document).ready(function () {
            $.ajax({
                url: 'xxxxxx/xxxxxxx',
                method: 'POST',
                datatype: 'json',
                success: function (data) {
                    console.log(data);
                    $('#datatable').dataTable({
                        data: data,
                        serverside:true,
                        columns: [
                            { 'data': 'UserId' },
                            { 'data': 'UserDepartment' },
                            { 'data': 'UserCourse' },
                            { 'data': 'UserName' },
                            { 'data': 'UserBirthDate' },
                            { 'data': 'UserEmail' },
                            { 'data': 'UserContact' }
                        ]
                    });
                }
            });
        });

1 个答案:

答案 0 :(得分:0)

如果您想在DataTable中显示数据并希望从服务器端获取带有Web服务的数据,那么这将是正确的方法:

$(document).ready(function () { 
  $.ajax({
    url: 'xxxxxx/xxxxxxx',
    method: 'POST',
    datatype: 'json',
    success: function (data) {
      console.log(data);
      $('#datatable').dataTable({
        data: data,
        columns: [
          { 'data': 'UserId' },
          { 'data': 'UserDepartment' },
          { 'data': 'UserCourse' },
          { 'data': 'UserName' },
          { 'data': 'UserBirthDate' },
          { 'data': 'UserEmail' },
          { 'data': 'UserContact' }
        ]
      });
    }
  });
});

说明:您首先从Web服务获取数据,然后将数据存储到javascript数据对象中,因此您不需要 Server-side processing 。 您只需通过 Javascript sourced data

绑定数据表

如果您想使用 POST data ,那么您可以通过

进行操作
$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": 'xxxxxx/xxxxxxx',
            "type": "POST"
        },
        "columns": [
              { 'data': 'UserId' },
              { 'data': 'UserDepartment' },
              { 'data': 'UserCourse' },
              { 'data': 'UserName' },
              { 'data': 'UserBirthDate' },
              { 'data': 'UserEmail' },
              { 'data': 'UserContact' }
        ]
    } );
} );