在ajax中将Json转换为jquery-datatable？

Question

现在，json数据已经存储在ajax中的变量"msg“中。我只能在页面中提醒(Msg)。但我希望将其放入datatable或任何适当的方式，以便在ajax或js中查看包含列的数据。

下面是json类型：

{ "aaData": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] } 

Answer 1

我不清楚您的问题，但我认为您希望将JSON值显示为表！

​

$(document).ready(function(){
var myjson = { "aaData": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] } ;
 console.log(myjson);
 for(i=0;i < myjson.aaData.length;i++){
  var html='';
  $.each(myjson.aaData[i], function(ind,val){
      html +='<td>'+val+'</td>';
  });
  $('#table_id tbody').append('<tr>'+html+'</tr>');
 }
   $('#table_id').DataTable();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<table id="table_id" class="display">
    <thead>
        <tr>
          <th>ID</th>
          <th>FESTIVAL</th> 
          <th>SUBURB</th>
          <th>POSTCODE</th>
          <th>WEBSITE</th>
          <th>DESCRIPTION</th>
        </tr>
    </thead>
    <tbody>        
    </tbody>
</table>

​

我希望这会对您有所帮助:)

Answer 2

这是这样做的

//html
<table id="example" class="display" width="100%">
</table>

//jquery
$('#example').DataTable( {
    "aaData": data,
    "aoColumns": [
        { "mDataProp": "name" },
        { "mDataProp": "position" },
        { "mDataProp": "office" },
        { "mDataProp": "extn" },
        { "mDataProp": "start_date" },
        { "mDataProp": "salary" }
    ]
} );
//data source

var data= [
{
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$320,800",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
},
{
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "$170,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
}
]

您应该参考this堆栈溢出问题。和this小提琴

Answer 3

这段代码对我很有效，试一下这段

​

 function AgGetDataCtrl() {
             debugger
            var AgServiceData = EmployeeService.AgGetDataSvc();
            AgServiceData.then(function (response) {
                //$scope.totalDisplayed = 20; 
                $scope.Datas = response.data;
                var d = response.data;
                debugger
               
                $(document).ready(function () {
                    var data = [];
                   // var data = [];//.data;

                    for (var i = 0 ; i < d.length; i++) {
                        data.push([  null,
                                    d[i].ECode, d[i].EName, d[i].EmploymentStatus, d[i].Company, d[i].Location,
                                    d[i].Department, d[i].Category, d[i].Designation, d[i].TBand, d[i].Roster,d[i].Shift,
                                    d[i].ForReports, d[i].DOJ, d[i].DOB, d[i].Gender, d[i].Address, d[i].City, d[i].Phone, d[i].Bloodgroup,
                                    d[i].Supervisor1
                            ]);
                    } 
                  var table=  $('#example').DataTable({ 
                        data: data,
                        "columnDefs": [ {
                            "targets": -21,
                            "data": null,
                            "defaultContent": ' <button type="button" class="btn bg-info  btn-xs mr-sm" title="View">  <em class="fa fa-edit fa-fw"></em> </button>'
                        } ],
                        deferRender: false,
                        "scrollY": 200,
                        "scrollX": true,
                        scrollCollapse: false,
                        scroller: false
                    });
                    $('#example tbody').on('click', 'button', function () {
                        var data = table.row($(this).parents('tr')).data();
                        debugger;
                        //alert(data[0] + "'s salary is: " + data[5]);
                        $scope.AgGetDataByIdCtrl(data[1]);
                    });
                    });
               // }
            }, function () {
                $scope.Alertmsg = "Error 1101";
            });
        }

​