Categories: php, json, ajax

how to get Json and load them inside the datatable using Ajax?

2 answers

I am new in AJAX and API`s:

enter image description here

I have created API (that returns an array of Status Items)

1- Index.php have the below code for the datatable:

           <table id="example1" class="table table-bordered table-hover table-striped">                      <thead>                         <tr>                            <th class="center">Code</th>                             <th class="center">Description</th>                             <th class="center">Status</th>                             <th class="center">Edit</th>                             <th class="center">Delete</th>                         </tr>                      </thead>                             <tbody>                              </tbody>                     <tfoot class="table-condensed table-bordered">                         <tr>                             <th class="center">Code</th>                             <th class="center">Description</th>                             <th class="center">Status</th>                             <th>Edit</th>                             <th>Delete</th>                         </tr>                     </tfoot>                 </table> 

The second file2.php includes the Javascript and Jquery and Ajax code:

I write the code below to get the Json from the api and fetch the rows into the above table:

var table = $("#example1 tbody");    $.ajax({     url: 'API_ReadAllSeed_Status.php',     method: "GET",     xhrFields: {        withCredentials: true     },     success: function (data) {             table.empty();         $.each(data.AllStatus, function () {          var Active_Status = "";         //the code below is to set a specific element depending on the result         if (this["STATUS_ACTIVE"] == 1)             {Active_Status = "<td><span class='label label-success'>Activated</span></td>";}         else          {Active_Status = "<td><span class='label label-danger'>Deactivated</span></td>"}          table.append("<tr><td>" + this["STATUS_CODE"] + "</td><td>" + this["STATUS_DESCRIPTION"] + "</td>" + Active_Status + "</td> <td><a href='' class='btn btn-app addeditdelete' value='" + this["STATUS_ID"] + "'><i class='fa fa-edit'></i> Edit </a></td> <td><a href='' class='btn btn-app addeditdelete' value='" + this["STATUS_ID"] + "'><i class='glyphicon glyphicon-trash'> </i> Delete</a></td> </tr>");   });  }    }); 

Result: The Json fetch successfully as I want but as shown in the picture, the rows are not inserted in the main body rows of the data table since nothing is working inside.

My Question:

How I am able to load the Json data into the datatable and use all its features [search and pagination and rows per page].

All answers to this question, which has the identifier 61149626

The best answer:

enter image description here Finally it works nowt but still have a question:

    $('#STATUS_TABLE').DataTable({        "ajax": {             "url": "API_ReadAllSeed_Status.php",             "dataSrc": "AllStatus"         },              "columns": [                 { "data": "STATUS_CODE" },                 { "data": "STATUS_DESCRIPTION" },                 { "data": "STATUS_ALT_DESCRIPTION" },                 { "data": "STATUS_ACTIVE" }             ]     }); 

Question: How I can change the format of the rows and to set different labels of the Status example rows with value 1 = Active and 0 = Deactivate.

After many searches and after trying many codes I found the below solution:

        { "data" : "STATUS_ACTIVE",             render : function(data, type, row) {                 if (data == 1)                     {data = "<span class='label label-success'>Activated</span>";}                 else                      {data = "<span class='label label-danger'>Deactivated</span>";}                       return data;              }          }, 

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data