jQuery jTable turned off pagination is causing an issue

Question

I am using a jQuery jTable with a 'Slide In' effect, so everytime a tab is clicked, it brings the data with 'Slide In' transition. However, I recently turned off the 'Pagination' feature in jQuery jTable and since then the 'Slide In' transition gets stuck in the middle while giving out the following message "No Data Available" and once the transitions is finished then only it brings the data.

Very Strange.. it gets stuck really bad in the middle and upon transition completion it then only bring the data and is a major issue.

Is there any way that I can have a ajax loading before it brings the data? or can I use any another transitions instead of the glitchy 'Slide In'?

I am bringing the data from a local Excel file. Any help is highly appreciated :)

Slide in Transition code:

$(document).on('click', '.PlayStatisticClass', function (e) {

    var $marginLefty = $("div[class='" + this.id + " win-ui-dark slide']")

    if (!$marginLefty.hasClass('slide in')) {

        if (this.id === "PlayStatisticone" || this.id === "PlayStatistictwo" || this.id === "PlayStatisticthree" || this.id === "PlayStatisticfour" || this.id === "PlayStatisticfive"
            || this.id === "PlayStatisticsix" || this.id === "PlayStatisticseven" || this.id === "PlayStatisticeight" || this.id === "PlayStatisticnine") {
            $marginLefty.addClass('registrationFormSlideIn').css('width', "");

        }
        else {


        }

    }
    else {

        $marginLefty.removeClass('slide in').addClass('slide').css('width', 0);

    }
});

jTable View Code: Where I turned off Pagination:

$(document).ready(function () {

    $('#TopPlayedTracksContainer1').jtable({
        title: 'Top Played Genres List',
        paging: false,
        pageSize: 1,
        sorting: true,
        defaultSorting: 'NoOfPlays DESC',
        actions: {
            listAction: '@Url.Action("BilingReportList")'

        },
        fields: {
           TrackID: {
                title: 'Track ID',
                tooltip: 'Track ID'
            },

            TrackName: {
                title: 'Track Name',
                tooltip: 'Track Name',
                key: true,
                create: false,
                edit: false,
                resize: false,
            },
            ArtistName: {
                title: 'Artist Name',
                tooltip: 'Artist Name'
            },
            Times: {
                title: 'Times',
                tooltip: 'Times'
            },
        }
    });

    $('#TopPlayedTracksContainer1').jtable('load');
});

Controller Code: Getting data from a local excel file:

public JsonResult BilingReportList(int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null)
    {
        try
        {
            if (Request.IsAuthenticated == true)
            {
                string Path = @"C:\\5Newwithdate.xls";
                OleDbConnection con = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source= '" + Path + "';Extended Properties=" + (char)34 + "Excel 8.0;IMEX=1;" + (char)34 + "");
                OleDbDataAdapter da = new OleDbDataAdapter("select * from [Sheet1$]", con);
                System.Data.DataTable data = new System.Data.DataTable();
                da.Fill(data);
                con.Close();

                List<TopPlayed> daa = new List<TopPlayed>();
                foreach (DataRow p in data.Rows)
                {
                    TopPlayed top = new TopPlayed()

                    {
                        TrackID = Convert.ToInt32(p.Field<double>("ID")),
                        TrackName = p.Field<string>("Track Name"),
                        ArtistName = p.Field<string>("Artist Name"),
                        Times = Convert.ToInt32(p.Field<double>("NoOfPlays"))
                    };

                    daa.Add(top);
                }

              var newlist = daa.OrderByDescending(i => i.Times).ToList();

              return Json(new { Result = "OK", Records = newlist, TotalRecordCount = daa.Count });

            }
            return Json(new { Result = "ERROR" });
        }
        catch (Exception ex)
        {
            return Json(new { Result = "ERROR", Message = ex.Message });
        }
    }

Answer 1

You need to delete those parameters:

int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null

public JsonResult BilingReportList()
{
    try
    {
        if (Request.IsAuthenticated == true)
        {
            string Path = @"C:\\5Newwithdate.xls";
            OleDbConnection con = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source= '" + Path + "';Extended Properties=" + (char)34 + "Excel 8.0;IMEX=1;" + (char)34 + "");
            OleDbDataAdapter da = new OleDbDataAdapter("select * from [Sheet1$]", con);
            System.Data.DataTable data = new System.Data.DataTable();
            da.Fill(data);
            con.Close();

            List<TopPlayed> daa = new List<TopPlayed>();
            foreach (DataRow p in data.Rows)
            {
                TopPlayed top = new TopPlayed()

                {
                    TrackID = Convert.ToInt32(p.Field<double>("ID")),
                    TrackName = p.Field<string>("Track Name"),
                    ArtistName = p.Field<string>("Artist Name"),
                    Times = Convert.ToInt32(p.Field<double>("NoOfPlays"))
                };

                daa.Add(top);
            }

          var newlist = daa.OrderByDescending(i => i.Times).ToList();

          return Json(new { Result = "OK", Records = newlist, TotalRecordCount = daa.Count });

        }
        return Json(new { Result = "ERROR" });
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}