How to show message "Loading..." when load json ajax on datatable

1mr0ns@m

I have code like below, my data already show on datatable but I can't show the message loading when it load.

$(document).ready(function () {
        $.ajax({
            type: "GET",
            url: 'mobilejkn/json',
            dataType: 'json',
            success: function (obj, textstatus) {
            $('#mytable').DataTable({
                pageLength: 50,
                data:obj,
                processing: true,
                columns: [
                        {  
                            "data": null,
                            "class": "align-top",
                            "orderable": false,
                            "searchable": false,
                            "render": function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }  
                        },
                        { data: 'id_daftar' ,
                         "visible" : false},
                        { data: 'tgl_daftar' },
                        { data: 'jam_poli' ,
                         "visible" : false},
                        { data: 'RM' },
                        { data: 'Nama' },
                        { data: 'tgl_lahir' },
                        { data: 'Alamat' },
                        { data: 'no_antri' },
                        { data: 'kode_book' }
                    ],
                    order: [ 2, 'asc' ],
                });
            },
                error: function (obj, textstatus) {
                    alert(obj.msg);
                }
            });
        });

I hope someone can help me, Thankyou

allan

The problem is that you are making your own Ajax call, rather than letting DataTables make it. So it doesn't have the opportunity to show a "Loading" message, since the first thing it knows is that you are passing it data.

So two options:

1) Show your own loading message before making the Ajax call and then hide it when the DataTable initialisation is complete, or

2) Let DataTables make the Ajax call and show its "Loading" message:

$(document).ready(function () {
  $('#mytable').DataTable({
    pageLength: 50,
    ajax: {
      url: 'mobilejkn/json',
      dataSrc: '',
    },
    processing: true,
    columns: [
      {
        data: null,
        class: 'align-top',
        orderable: false,
        searchable: false,
        render: function (data, type, row, meta) {
          return meta.row + meta.settings._iDisplayStart + 1;
        },
      },
      { data: 'id_daftar', visible: false },
      { data: 'tgl_daftar' },
      { data: 'jam_poli', visible: false },
      { data: 'RM' },
      { data: 'Nama' },
      { data: 'tgl_lahir' },
      { data: 'Alamat' },
      { data: 'no_antri' },
      { data: 'kode_book' },
    ],
    order: [2, 'asc'],
  });
});

That would replace the whole code block from your post.

Allan

1mr0ns@m

@allan

Thank you for your answer, it works like a charm.