不使用给定响应初始化jquery

Question

我想用生成的响应初始化数据表。

我的反应如下

{data: Array(3), status: true}
data :  Array(3)
0  :    {countryId: 1, countryName: "sampleCountry", countryShortCode: "sampleCode", status: "yes"}
1  :    {countryId: 2, countryName: "pakistan", countryShortCode: "pak", status: "yes"}
2  :    {countryId: 3, countryName: "sample2", countryShortCode: "pak", status: "yes"}

请看我的html

<table class="table table-striped" id="countryTable">

                                    <thead>
                                      <tr>
                                        <th>S.NO.</th>
                                        <th>Country Name</th>
                                        <th>Country Short Name</th>


                                      </tr>
                                    </thead>
                                    <tbody>
                                   </tbody>
</table>

请看我的数据表初始化

$.ajax({        
            url : url,

            type:"get",     
            contentType:'application/json; charset=utf-8',  
            dataType: 'json' ,
            async: false,  
            success:function(response) 
            {     
                alert(response.data);  

                  $('#countryTable').DataTable( {
                        "fnRowCallback" : function(nRow, aData, iDisplayIndex){
                            $("td:first", nRow).html(iDisplayIndex +1);
                           return nRow;
                        },
                         destroy: true,
                        mydata: response.data, 
                        columns: [     
                             { mydata:'countryId'},   
                             { mydata:'countryName'},
                             { mydata:'countryShortCode'}     


                        ]  
                    } );         

                console.log(response);
            }
        });

初始化后，数据表显示为，表中没有可用的数据，但表是用datatable插件初始化的。数据不会出现在表中。我的代码出了什么问题请帮帮我。

Answer 1

代码看起来很好，只需将mydata更改为data，如下所示：

​

var response = {
  data: [{
      countryId: 1,
      countryName: "sampleCountry",
      countryShortCode: "sampleCode",
      status: "yes"
    },
    {
      countryId: 2,
      countryName: "pakistan",
      countryShortCode: "pak",
      status: "yes"
    },
    {
      countryId: 3,
      countryName: "sample2",
      countryShortCode: "pak",
      status: "yes"
    }
  ],
  status: true
}

$('#countryTable').DataTable({
  "fnRowCallback": function(nRow, aData, iDisplayIndex) {
    $("td:first", nRow).html(iDisplayIndex + 1);
    return nRow;
  },
  destroy: true,
  data: response.data,
  columns: [{
      data: 'countryId'
    },
    {
      data: 'countryName'
    },
    {
      data: 'countryShortCode'
    }


  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-striped" id="countryTable">

  <thead>
    <tr>
      <th>S.NO.</th>
      <th>Country Name</th>
      <th>Country Short Name</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

​