Jquery datatable server side processing

Question

i am current using JQuery standard database from MVC controller.

my Model contains few thousands of record and during first load. it took few seconds to load and the page turn extreamly long during loading.Datatable set to 10 records per page after all the loadings.

so i decide to use datatable server side processing.to reduce the first load time.How to i get it work it entity frame work in mvc?

public ActionResult ProductList() {
        ProductModel model = new ProductModel();
        model = db.productModels.ToList();
        return View(model)
    }

<table>
@{
<th>columns</th>
    foreach (var item in productmodel)
    {
        //loop for my logic for all products

    <td>@item</td>
    }
}

Rather then fetching thousand of records at a time. try to fetch data in batches at load. you can try lazy loading as well — Hardik Gondalia
– Hardik Gondalia, Commented Jan 31, 2017 at 5:42
I agree with @UbiquitousDevelopers. You probably need to implement paging here and load 10 records per call of ProductList action. As you said that you showing only 10 records per page after loading. — Alexander V.
– Alexander V., Commented Jan 31, 2017 at 5:58

CodingYoshi · Accepted Answer · 2017-01-31 06:13:52Z

1

Use paging:

ActionResult ProductList(int startIndex, int pageSize) 
{
    var page = db.ProductModels.Skip(startIndex).Take(pageSize);
    return View(page);
}

You can read more here on paging, filtering, and sorting.

answered Jan 31, 2017 at 6:13

CodingYoshi

27.3k7 gold badges68 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MVC newbie · Accepted Answer · 2017-01-31 08:28:24Z

this is how i do it eventually which is what i wanted. Credit goes to this guy https://www.codeproject.com/Tips/1011531/Using-jQuery-DataTables-with-Server-Side-Processin

 $(document).ready(function () {
    $('#table_id').DataTable({
        "processing": true,
        "serverSide": true,
        "info": true,
        "pageLength": 3,
        "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
        "columns": [
           { "data": "id", "orderable": true },
             {  "data": "productName", "orderable": true
           },

        ],
        "ajax":"@Url.Action("GetProductList","Home")"
    });
});

  public struct DataTableData
    {
        public int draw { get; set; }
        public int recordsTotal { get; set; }
        public int recordsFiltered { get; set; }
        public List<ProductTable> data { get; set; }
    }
    private int SortString(string s1, string s2, string sortDirection)
    {
        return sortDirection == "asc" ? s1.CompareTo(s2) : s2.CompareTo(s1);
    }
    public JsonResult GetProductList(int draw, int start, int length)
    {
        var model = db.ProductTables.ToList();
        DataTableData dt = new DataTableData();            
       string search = Request.QueryString["search[value]"];
        string ha= Request.QueryString["columns[0][orderable]"];
        string order = Request.QueryString["order"]; 
        string ord= Request.QueryString["order[0][dir]"];
        if (!string.IsNullOrEmpty(search))
        {
            dt.data = model.Where(x=>x.productName.Contains(search)).ToList();// model.GetRange(start, Math.Min(length, model.Count - start));

        }

        dt.data=model.Skip(start).Take(length).ToList();
        if (!string.IsNullOrEmpty(ord))
        {

            dt.data.Sort((x, y) => SortString(x.productName, y.productName, ord));
        }
        dt.draw = draw;
        dt.recordsTotal = model.Count;
        dt.recordsFiltered = model.Count;
        return Json(dt, JsonRequestBehavior.AllowGet);
    }

Collectives™ on Stack Overflow

Jquery datatable server side processing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related