Conceptual
Conceptual

Reputation: 57

mvc - jQuery ajax datatable actionlink

I have a datatable in which the data (from the database) is being filled with ajax, I also want a new tablerow with "Details" to show more details of the selected item, but the table only allows data from the database. Here is the view

 <script language="javascript" type="text/javascript">

     $(document).ready(function () {

         $('#myDataTable').dataTable({
             "bProcessing": false,
             "bServerSide": true,
             "sAjaxSource": 'AjaxDataProvider',
             "aoColumns": [
                                     {
                                         "sName": "ID",


                                     },
                                     { "sName": "Student_naam" },
                                     { "sName": "klas" },
                                     { "sName": "adres" },
                                     { "sName": "woonplaats" },
                                     { "sName": "details" }
             ]

         })
     });

    </script>

and I have a table beneath with some code including this:

<td>
            @Html.ActionLink("Details", "Index", "StudentGegevens", new {id = item.studentnr})
        </td>

Here is my controller

public ActionResult AjaxDataProvider(JQueryDataTableParamModel param)
    {
        var allStudents = hoi.STUDENT.ToList();
        IEnumerable<STUDENT> filteredStudents;
        if (!string.IsNullOrEmpty(param.sSearch))
        {
            //Used if particulare columns are filtered 
            var roepnaamFilter = Convert.ToString(Request["sSearch_1"]);
            var adresFilter = Convert.ToString(Request["sSearch_2"]);
            var woonplaatsFilter = Convert.ToString(Request["sSearch_3"]);
            var klasFilter = Convert.ToString(Request["sSearch_4"]);

            //Optionally check whether the columns are searchable at all 
            var isNameSearchable = Convert.ToBoolean(Request["bSearchable_1"]);
            var isAddressSearchable = Convert.ToBoolean(Request["bSearchable_2"]);
            var isTownSearchable = Convert.ToBoolean(Request["bSearchable_3"]);
            var isClassSearchable = Convert.ToBoolean(Request["bSearchable_4"]);

            filteredStudents = hoi.STUDENT.ToList()
               .Where(c => isNameSearchable && c.roepnaam.ToLower().Contains(param.sSearch.ToLower())
                           ||
                           isAddressSearchable && c.adres.ToLower().Contains(param.sSearch.ToLower())
                           ||
                           isTownSearchable && c.woonplaats.ToLower().Contains(param.sSearch.ToLower())
                           ||
                           isClassSearchable && c.klas.ToLower().Contains(param.sSearch.ToLower()));
        }
        else
        {
            filteredStudents = allStudents;
        }

        var isNameSortable = Convert.ToBoolean(Request["bSortable_1"]);
        var isAddressSortable = Convert.ToBoolean(Request["bSortable_2"]);
        var isTownSortable = Convert.ToBoolean(Request["bSortable_3"]);
        var isClassSortable = Convert.ToBoolean(Request["bSortable_4"]);
        var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
        Func<STUDENT, string> orderingFunction = (c => sortColumnIndex == 1 && isNameSortable ? c.roepnaam :
                                                      sortColumnIndex == 2 && isClassSortable ? c.klas :
                                                      sortColumnIndex == 3 && isAddressSortable ? c.adres :
                                                      sortColumnIndex == 4 && isTownSortable ? c.woonplaats :
                                                      "");

        var sortDirection = Request["sSortDir_0"]; // asc or desc
        if (sortDirection == "asc")
        {
            filteredStudents = filteredStudents.OrderBy(orderingFunction);
        }
        else
        {
            filteredStudents = filteredStudents.OrderByDescending(orderingFunction);
        }

        var displayedStudents = filteredStudents.Skip(param.iDisplayStart).Take(param.iDisplayLength);
        var result = from c in displayedStudents select new[] { Convert.ToString(c.studentnr), c.roepnaam, c.klas, c.adres, c.woonplaats, "Here is the thing I dont know what to fill in" };
        return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = allStudents.Count(),
            iTotalDisplayRecords = filteredStudents.Count(),
            aaData = result
        },
                    JsonRequestBehavior.AllowGet);
    }

And some public ints

public class JQueryDataTableParamModel
    {   
        public string sEcho { get; set; }

        public string sSearch { get; set; }

        public int iDisplayLength { get; set; }

        public int iDisplayStart { get; set; }

        public int iColumns { get; set; }

        public int iSortingCols { get; set; }

        public string sColumns { get; set; }


    }

I would like to know what I should put at the var Result.

everything is displayed correctly except the link, I tried something like Url.Action but without luck, it doesn't give a link back.

Upvotes: 0

Views: 1946

Answers (2)

Conceptual
Conceptual

Reputation: 57

Sorry, I'm a dumbass, I remembered I could put string in the controller with HTML and it would convert it to HTML ->.

var result = from c in displayedStudents select new[] { Convert.ToString(c.studentnr), c.roepnaam, c.klas, c.adres, c.woonplaats, "<a style='font-family:arial' href='" + "../StudentGegevens/index/" + c.studentnr + "' />Details</a>"};

lol, not the brightest person I am, I'm sorry for asking this question.

Upvotes: 0

OQJF
OQJF

Reputation: 1350

Not very sure what kind of detail data that you want to show, but you can check the method: fnrender or mRender, below is a sample.

"aoColumns": [
                                     {
                                         "sName": "ID",


                                     },
                                     { "sName": "Student_naam" },
                                     { "sName": "klas" },
                                     { "sName": "adres" },
                                     { "sName": "woonplaats" },
                                     { "sName": "details",
  "mRender": function ( data, type, full ) {
        return '<a href="'+data+'">Download</a>';
      } }
             ]

Upvotes: 1

Related Questions