How to add ajax loader before it loads the data in jQuery jTable?

Question

I am using a jQuery jTable and it gives the message first "No Data Available" before it loads the data and displays a long list of it. So is it possible to display an Ajax loader (loading.gif) first while it's loading the data in the background?

Edit @Rex: i Tried this but don't know how to implement it with the jQuery jTable success function.

This is the code I tried:

$(document).on('click', '#PlayStatisticone', function (e) {
    function loadingAjax(div_id) {
        var divIdHtml = $("#"+div_id).html();
        $.ajax({
        url: '@Url.Action("_TopPlayedTracksPermissionCheck", "ReportStatistic")',
        type: 'POST',
        beforeSend: function() {
                $("#loading-image").show();
            },
        success: function (data) {
            $("#"+div_id).html(divIdHtml + msg);
            $("#loading-image").hide();


            $(function () {
                    $("#PartialViewTopPlayedTracks").load('@Url.Action("_PartialViewTopPlayedTracks", "ReportStatistic")');
            });

        },
        error: function (xhr, textStatus, exceptionThrown) {

            var json = $.parseJSON(xhr.responseText);

            if (json.Authenticated) {
                window.location.href = '/UnAuthorizedUser/UnAuthorizedUser';
            }
            else {
                window.location.href = '/UnAuthenticatedUser/UnAuthenticatedUser';
            }
        }
    });

Any suggestion would be really helpful Thanks in advance.

Answer 1

It worked just as I wanted... I found it from an another forum

I don't know if it's ok to post worked answers from another forum or not in here:

here's the code that worked:

$(document).ready(function () {
 // DOM is ready now
 $.post("<%= Url.Action("ActionThatGetsTableOnly") %>",
    "",
    function(data) { $("#elementToReplaceId").html(); },
"html"
  );
});