How to bind JQuery Datatable with list inside a class.

kiran a

5y1.8kLearn iOS Programming

Hi,

I am trying to bind multiple jquery datatable with single ajax call. Below is code snippet.

How do we bind jquery datable when list is inside class.

Ajax call will return "ReportViewModel". List which is required to bind datatable will inside this object.

example as below

public class ReportViewModel
{
public List AList { get; set; }
public List MList { get; set; }
public List ACList { get; set; }
}
public class ReportingDataViewModel
{
public string CN { get; set; }
public string RUrl { get; set; }
public string Status { get; set; }
public string StartTime { get; set; }
public string EndTime { get; set; }
}

how do i feed the data to datatable like data.Alist ??

$("#RolesTable").DataTable({

"processing": true, // for show progress bar

"serverSide": false, // for process server side

"filter": true, // this is for disable filter (search box)

"orderMulti": false, // for disable multiple column at once

"ajax": {

"url": "/Reports/GetReports",

"type": "POST",

"datatype": "json",

"columnDefs": [{

"targets": [0],

"visible": false,

"searchable": false

}],

please help.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rijwan Ansari5y ago
You can use jquery datatable to html tables with data.
Simply binding using ajax response
$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": ReportViewModel
    } );
} );
and Table sample:
"example" class="display" style="width:100%">


                Name
                Position
                Office
                Extn.
                Start date
                Salary




                Name
                Position
                Office
                Extn.
                Start date
                Salary
Sachin Singh5y ago
When you have collection properties then don't use ajax , just simply use normal table with foreach block and then convert the table to a datatable.
See , in below example i have list of students in each course so i used foreach and then converted the table into a datatable.
DataTable


"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />



"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">

"~/Scripts/jquery-3.4.1.min.js">
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
"example" class="table table-bordered">



            Course
            Student




@foreach (var item in Model)
                    {

            @item.Course


                    @foreach (var student in item.Students)
                    {








                    }

@student.Id @student.Name




}





            Course
            Student




public ActionResult DataTable()
       {

           List studentlist = new List(){
               new Student(){Id=1,Name="Sachin",CourseId=1},
               new Student(){Id=2,Name="Arjun",CourseId=1},
               new Student(){Id=3,Name="Vikash",CourseId=2},
               new Student(){Id=4,Name="Nivi",CourseId=2},
           };
           List courseList = new List(){
           new Course(){Id=1,Name="Asp.Net"},
              new Course(){Id=2,Name="Jquery"},

           };

           var studentByCourse = courseList
                                      .GroupJoin(studentlist,
                                        c => c.Id,
                                        s => s.CourseId,
                                        (course, Students) => new DtVM
                                        {
                                            Course = course.Name,
                                            Students = Students.ToList()
                                        });

           return View(studentByCourse);
       }
Asma Khalid5y ago
Know that one Jquery Datatables will bind only one list. You have to create multiple HTML tables to bind each require list. You have to explicitly map display columns with Jquery Datatables. You can look into https://bit.ly/2vhBKDc to bind Jqery Tables columns dynamically with ajax call.

As for how you can access your list data from the ReportViewModel class you can make some changes in your C# code i.e.

For C# Code
public ActionResult YourAjaxMethod()
{
...

        ReportViewModel model = new ReportViewModel();

         List data = model.AList;

         // Datatables Result.
         result = this.Json(new { draw = Convert.ToInt32(draw), recordsTotal = totalRecords, recordsFiltered = recFilter, data = data }, JsonRequestBehavior.AllowGet);

return result;
...
}
Mark answer as accepted if helpful

Thanks & Regards,
Asma Khalid

For More Visit: www.asmak9.com or www.bytezaar.com