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

Question

I am new in AJAX and API`s:

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].

It looks like you are using some special table/framework/lib to generate the table. Is that the case? What lib are you using? — Dekel
– Dekel, Commented Apr 10, 2020 at 22:39
@Dekel Looks like bootstrap. add dataType: 'json' in your ajax options this will turn a json string into a javascript usable json object/array. and make sure the server returns a json string. Also to DEBUG add the html you create to a variable and console.log it to see what your loop is creating — Baracuda078
– Baracuda078, Commented Apr 10, 2020 at 23:27
yes its a bootstrap datatable, I have added the datatype:'Json' and debug it and the result was as Json with array. but this will not fix my Issue. sinceI am already able to get the Json array and fetch it with .each() function , but applying the rows inside the datatable is not working fine with pagination and rows per page and search field. Notice that: If I added the <tr><td></td></tr> Manually the pagination and the search field works normaly — SDiab
– SDiab, Commented Apr 11, 2020 at 11:25

SDiab · Accepted Answer · 2020-04-11 15:11:55Z

1

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.

answered Apr 11, 2020 at 15:11

SDiab

411 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SDiab · Accepted Answer · 2020-04-11 19:23:04Z

0

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;
             }    
     },

answered Apr 11, 2020 at 19:23

SDiab

411 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related