coder771 coder771 - 6 months ago 156
jQuery Question

multiple datatable on a page with more then 10,000 record loading slow

I have 5 datatable on different tabs on same page, I'm filling them up on page load in same method. I'm using entity framework,database first in mvc

Its loading too slow now. Is there some other way to load them, i was thinking of filling them up from different methods, by calling action method on tab click?

Can someone point me out the correct way to do it.

Thanks,

Answer

sample code of what i have done to achieve

jquery code

<script>
$(document).ready(function () {
    $("#myTable").DataTable({
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": false, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "ajax": {
            "url": "/home/LoadData",
            "type": "POST",
            "datatype": "json"
        },
        "columns": [
                { "data": "ContactName", "name": "ContactName", "autoWidth": true },
                { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                { "data": "Phone", "name": "Phone", "autoWidth": true },
                { "data": "Country", "name": "Country", "autoWidth": true },
                { "data": "City", "name": "City", "autoWidth": true },
                { "data": "PostalCode", "name": "PostalCode", "autoWidth": true }
        ]
    });
});

ASP.NET C# Code (MVC)

[HttpPost]
public ActionResult LoadData()
{

    var draw = Request.Form.GetValues("draw").FirstOrDefault();
    var start = Request.Form.GetValues("start").FirstOrDefault();
    var length = Request.Form.GetValues("length").FirstOrDefault();
    //Find Order Column
    var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault();
    var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();


    int pageSize = length != null? Convert.ToInt32(length) : 0;
    int skip = start != null ? Convert.ToInt32(start) : 0;
    int recordsTotal = 0;
    using (MyDatatableEntities dc = new MyDatatableEntities())
    {

        var v = (from a in dc.Customers select a);

        //SORT
        if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
        {
            v = v.OrderBy(sortColumn + " " + sortColumnDir);
        }

        recordsTotal = v.Count();
        var data = v.Skip(skip).Take(pageSize).ToList();
        return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet);
    }
}