How to load jquery datatable using Ajax call, Loading table details from multiple tables (Master, Detail)

asp.net-mvc-5 datatables entity-framework-6 jquery

Question

Web technologies are new to me and I'm continually learning them. I need advice on how to proceed in this situation. This is a straightforward Model that corresponds to the database structure I'm using, which should make clear what I'm after.

Company, Employee, and EmpDetail are three Tables entities.

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

hence, my pageCompany information at the top and a Datatable ofEmployees they are a part of our business. Each Employee row in the table contains a Load action link, which opens a FORM in a Bootstrap popup. any kind of dialogue, such as modalEmpDetails for that specific worker. The EmpDetails may be updated or changed, and I can return this form to the server usingajax.beginForm() i.e., just using ajax to upload back updated EmpDetails

All of this was finished up until I attempted to load a datatable using ajax and completely lost my mind.

Why should I ajax the datatable? Therefore, the reason for this is that I wanted the Employee DataTable to include a status column that updates when you modify the EmpDetails and submit it. As a result, I wanted to update the Datatable any time a user made a modification to the Empdetail. As far as I've investigated, you handle the datatable reload/refresh piece using AJAX requests, so yep, Thats why. "I hope that makes sense," I say.

hence, before to loading anything through Ajax, call Using a ViewModel class with a list of Employees defined in it made sense to me. then stack everything together.

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

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

The datatable should now be loaded using ajax, with a link to the employee information table in each row so that it may be changed.

I've seen a lot of threads and methods, but they differ depending on the needs. I don't want any sluggish loading to occur. Because the employees list isn't very long, I want the employee Datatable to load all at once and let the jquery Datatable plugin handle client-side paging.

I'd welcome any recommendations, particularly for any well-written publications that go into further depth on these ideas. Thanks,

Entity framework is what I use to manage my entities.

1
0
5/24/2017 5:01:58 PM

Popular Answer

well-written essays on the subject, I'd recommend starting with here

Then there is part here, and you can also check out 3 and 4. I believe this tutorial has pretty well covered all you need to know about datatable plugin's fundamentals.

Bear in mind that there are other instances here

Use callback if you are familiar with datatable and want to load numerous data for each row.

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 keep in mind that your linq will raise an error if you do not import emp information with employee; you may load it like this.

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

I hope that was useful.

0
5/25/2017 2:31:48 PM


Related Questions





Related

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