无法使用Datatables jquery将数据填充到数据表中答案

【问题标题】：Not able to fill data into datatable using Datatables jquery无法使用Datatables jquery将数据填充到数据表中
【发布时间】：2015-09-02 05:15:56
【问题描述】：

我无法将数据填充到数据表中。我可以在 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' }
                        ]
                    });
                }
            });
        });

【问题讨论】：

请简要说明.. 至少说明您使用的是哪种技术...
.net web 服务返回 json 数据数组。
好的，$('#datatable').dataTable( 是什么？？
这是我要在其中填充数据的表。 '#datatable 是我的表 ID。
如何感受数据库中的数据？

标签： jquery datatable datatables

【解决方案1】：

如果您想在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' }
        ]
    } );
} );

【讨论】：

谢谢...但我收到以下错误... DataTables 警告：表 id=example - 请求第 0 行的未知参数“0”。有关此错误的更多信息，请参阅datatables.net/tn/4
您应该检查数据并检查 web 服务返回数据的格式，即 json 或 text 或 ...
[{"UserId":2,"UserDepartment":"asp.net","UserCourse":"Chirag","UserName":"Employee","UserBirthDate":"4/1 /1990 12:00:00 AM","UserEmail":"xxxxxx.xxxxx@gmail.com","UserContact":1234567},"}] 我将上述数据输入到 console.log(data)
最后有多余的逗号..或者你的UserCintact数据有误，应该是"UserEmail":"xxxxxx.xxxxx@gmail.com","UserContact":"1234567"}]
您使用哪种方式..？如果您从 datatables ajax 调用数据，那么您应该以这种格式返回 json：{ "draw": 1, "recordsTotal": 57, "recordsFiltered": 57, "data": [ { "first_name": "Airi", "last_name": "Satou", "position": "Accountant", "office": "Tokyo", "start_date": "28th Nov 08", "salary": "$162,700" }] }