I want to show the json data from action in the datatable

The table is empty. No data is coming.

public JsonResult GetData(){
Uri url=new Uri("https://rallycoding.herokuapp.com/api/music_albums");
WebClient client=new WebClient();
client.Encoding=System.Text.Encoding.UTF8;
string json=client.DownloadString(url);
return Json(json);
}
<table id="example" class="table table-bordered table-striped table-sm">
     <thead>
         <tr>
            <th>title</th>
            <th>artist</th>
            <th>url</th>

         </tr>
     </thead>
</table>
<script>
 $(document).ready(function(){
$.ajax({
datatype:"json",
url:"/Home/GetData",
succes:function(data){
    var obj=Json.parse(data);
}
})
var table=$('#example').DataTable({
'data':obj,
'paging':true,
'searching':true,
'ordering':true
})
})
</script>

I can parse the JSON data into the list and write it to the table with the viewbag, but I have to JSON it to the datatable.

can you help me?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

you need to add columns in your bind operation, here is the code

  $(document).ready(function() {
  
     $.get("/Home/GetData", function(data, status){
     var obj=JSON.parse(data);
           var table=$('#example').DataTable({
        'data':obj,
        'paging':true,
        'searching':true,
        'ordering':true,
     "columns": [
        { data: "title" },
        { data: "artist" },
        { data: "url" }
        ]
        });
    });
  });
 <!--Import jQuery before export.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <!--Data Table-->
    <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

    <!--Export table buttons-->
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
    <script type="text/javascript"  src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>



<table id="example" class="table table-bordered table-striped table-sm">
     <thead>
         <tr>
            <th>title</th>
            <th>artist</th>
            <th>url</th>

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x