Question posted in
You can find the official documentation here.

ajax data with datatables js – Jquery ajax

so.. i have an ajax read from database using an api controller (GET method)
the data that is coming back from the ajax is correct but i cant seem to populate it into datatables

        $(document).ready(function () {
            
            $.ajax({
                dataType: "json",
                url: webRoot + "/api/report",
                contentType: "application/json",
                type: "GET",
                //data: JSON.stringify(),
                success: function (tData) {
                    loadData(tData);
                },
                error: function (err) {
                    console.log(err);
                },
            });
        
        });

        function loadData(tData) {
            $("#example").DataTable({
                data: tData
            });
        }

this is my latest try:

        $(document).ready(function () {

            $("#example").DataTable({
                ajax: {
                    url: "/api/report",
                    type: "GET"
                }
            });
        });

and this is the error i get in console:

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thank you everyone issue solved just needed to push the data from the ajax pull to an array of objects than to the data table.

            $(document).ready(function () {
            $.ajax({
                dataType: "json",
                url: webRoot + "/api/report",
                contentType: "application/json",
                type: "GET",
                //data: JSON.stringify(),
                //processing: true,
                success: function (res) {
                    //loadData(res);
                    var return_data = new Array();
                    for (let i = 0; i < res.length; i++) {
                        return_data.push({
                            0: res[i].EmployeeId,
                            1: res[i].FirstName,
                            2: res[i].LastName,
                            3: res[i].Title,
                            4: res[i].TotalCustomers,
                            5: res[i].TotalSales,
                        });
                    }

                    $("#example").DataTable({
                        data: return_data,
                    });
                },
                error: function (err) {
                    console.log(err);
                },
            });
        });

  2. 0

    Consider the following example.

    $(function() {
  var webroot = ".";
  $("#example").DataTable({
    ajax: {
      url: webroot + "/api/report"
    }
  });
});

    You will want to test your url manually in browser to ensure that you’re getting expected results.

    Update

    Consider the following code based on what you’re using.

    $('#example').dataTable( {
  ajax: {
    url: webRoot + "/api/report",
    dataSrc: function (res) {
      var json = {
        data: []
      };
      $.each(res, function(k, v){
        json.data.push([
          v.EmployeeId,
          v.FirstName,
          v.LastName,
          v.Title,
          v.TotalCustomers,
          v.TotalSales
        ]);
      });
      return json;
    }
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search