jQuery Datatables json AJAX help pls "No Data Available in Table"

Question

I have a table that is made in the $( document ).readyfunction. I am also using the jQuery DataTables plugin. For some reason, when the page loads, the table loads but the first row says:

"No Data Available in Table".

This my controller:

  public string Lowx()
        {
            var query = db.Infoes.
                Include(x => x.Profile).
                Include(x => x.Car).

                ToList();

return JsonConvert.SerializeObject(query.ToList());

This my Ajax function:

 $(document).ready(function (data) {

          $('#cars').DataTable({


              ajax: {
                  url: '@Url.Action("lowx")',
                  type: 'POST',
                  dataType: 'json',
                  dataSrc: ""

              },
              columns: [
                  { data: "FirstName", name: "FirstName" },
                  { data: "LastName", name: "LastName" },
                  { data: "MiddleName", name: "MiddleName" },
                  { data: "BirthDate", name: "BirthDate" },
                  { data: "CarName", name: "CarName" },
                  { data: "CarNumber", name: "CarNumber" },

              ],




    });
});

Datatables write:

enter image description here

Default http verb is GET but Ajax is sending POST, have you tried adding [HttpPost] decorator? Can you see any error in console? — Daniel Manta
– Daniel Manta, Commented Aug 13, 2018 at 15:45

Paul Abbott · Accepted Answer · 2018-08-13 15:50:57Z

Take a look at https://datatables.net/examples/ajax/objects.html. It's expecting an object with an array property called "data" that contains the data, not a straight array.

Also,

(a) Your controller action is returning a string. You should return a JsonResult which does the serialization for you (and sets mime types etc appropriately).

public JsonResult Lowx()
{
    var query = db.Infoes.
        Include(x => x.Profile).
        Include(x => x.Car).
        ToList();

    return Json(new { data = query });
}

Ideally, you should just get the data you need instead of retrieving all the columns in the table(s). This is making a complete guess as to what your schema looks like, but...

public JsonResult Lowx()
{
    var query = db.Infoes.
        Select(x => new()
        {
            FirstName = x.Profile.FirstName,
            LastName = x.Profile.LastName,
            MiddleName = x.Profile.MiddleName,
            BirthDate = x.Profile.BirthDate,
            CarName = x.Car.CarName,
            CarNumber = x.Car.CarNumber
        });

    return Json(new { data = query });
}

(b) Why are you using a POST request to retrieve data?

Mas dem · Accepted Answer · 2018-08-13 15:51:14Z

try this code:

javascript:

  $('#cars').dataTable({
    responsive: true,
    "searching": true,
    "scrollCollapse": true,
    dom: 'Blrtip',
    "processing": true,
    "serverSide": true,
    "ajax": $('#cars').data('source'),
    "pagingType": "simple_numbers",
     "columns": [
                  { data: "FirstName"},
                  { data: "LastName"},
                  { data: "MiddleName"},
                  { data: "BirthDate"},
                  { data: "CarName",
                  { data: "CarNumber"},

              ], 
  });

html code:

<table id="cars" data-source="lowx">
          <thead>
            <tr role="row">
              <th>first name</th>
              .....
              <th>car number</th>
            </tr>
          </thead>
          <tbody> 
          </tbody>
      </table>

Mas dem · Accepted Answer · 2018-08-14 09:29:56Z

0

visit this url for more info: https://datatables.net/reference/api/ajax.url().load()

  var table = $('#example').DataTable( {
        ajax: "data.json"
    } );

    table.ajax.url( 'newData.json' ).load();

answered Aug 14, 2018 at 9:29

Mas dem

1071 silver badge1 bronze badge

Collectives™ on Stack Overflow

jQuery Datatables json AJAX help pls "No Data Available in Table"

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related