How to load jquery datatable using Ajax call, Loading table details from multiple tables (Master, Detail) datatables entity-framework-6 jquery


New and still a learner of the Web Technologies. Need directions here the right approach of how this be done. To explain the gist of what I'm looking for, this is a simple Model which maps to DB structure I'm using.

Three Tables entities: Company, Employee, EmpDetail

Relationships: Company 1__* Employee , Employee 1__1 EmpDetail

So my page has Company details on top, along with Datatable of Employees that belong to this company. Each Employee(table row) has got a Load action link that is being used to open a FORM in a Bootstrap popup Modal or any sort of dialog, that shows EmpDetails for that respective employee. I can edit/update the EmpDetails and submit this form back to the server using ajax.beginForm() i.e only posting back updated EmpDetails with ajax.

All of this been done till when I tried loading datatable using ajax and got confused big time.

Reason WHY Ajaxing The Datatable ?? So, this is because I wanted to have a status column in Employee DataTable that changes when you change the EmpDetails and submit it. So I wanted to refresh the Datatable every time after the user makes change in the Empdetail. "I hope it makes sense" :) , so as much as I've researched, you do the datatable reload/refresh bit using AJAX calls.. so yeah, Thats why.

So before loading anything through Ajax call It was simple for me to use a ViewModel class, which defines a list of Employees in it. And load everything all together.

public class CompanyViewModel
    // Some Company table prperties
    public long Id { get; set; }
    public string Name { get; set; }

    public list<Employee> listOfEmployees { get; set; }

Now I want the Datatable to be loaded with ajax, each employee row having a link to open Employee details table so that it can be edited.

I've seen many threads and approaches but they vary with the requirements. I do not want any lazy loading here. I want employee Datatable to be loaded all in one go and let the jquery Datatable plugin handle the paging on client end because the employees list is not in large.

Would appreciate any sugestions, especially some well written articles that cover these concepts in details. Thanks,

I'm using entity framework to manage my entities.

5/24/2017 5:01:58 PM

Popular Answer

well written articles regarding this topic, I would start here

then here , there is part 3 and 4 also you can check, i think this tutorials pretty much covered all the basics you want to know about datatable plugin

keep in mind you will find a lot of examples here

if you already know how to use datatable but you just want to load many data foreach row, use callback,

drawCallback: function (oSettings) {
    if (oSettings.aiDisplay.length > 0) {
        for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
            var row = oSettings.aoData[oSettings.aiDisplay[i]];
            var rowItem = row.nTr;
            //Assuming you are loading employee, row._aData will be the current employee object.
            // this will get his id for example  
            var empid = row._aData.EMPID;
            var empDetail = row._aData.EmpDetail;
            //do something with EmpDetail, (maybe add to hidden div), or display in another cell in this row 
            // ex
            $('td:eq(4)', rowItem).html("some html template + emp detilas");     

also note that if your linq does not load emp details with employee it will throw an error, you can load it like this

var empdata = dbcontext.Employees.Include(g => g.EmpDetail).toList();

I hope that helped.

5/25/2017 2:31:48 PM

Related Questions


Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow