Having an Issue with Individual Column Searching

Having an Issue with Individual Column Searching

wilsondb2wilsondb2 Posts: 1Questions: 0Answers: 0

Hello, I am fairly new to Datatables and honestly all coding in general. By following a plethora of tutorials, I have created an ASP.NET Core MVC in which data is loaded through a Json from a method in a controller to an index view in which the DataTable is located.

I am trying to implement individual column searching. I have the text boxes located in the footer and I can tell that the DataTable is processing the requests when I try to search, but it doesn't provide any results. Here is my code:

Datatable from Index -

<script>
            $(document).ready(function ()
              {
                 // Setup - add a text input to each footer cell
                 $('#Students tfoot th').each( function () {
                     var title = $(this).text();
                     $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                 });

                //DataTable
                var table = $('#Students').DataTable({
                    "dom": '<"top"Bf>rt<"bottom"lp><"clear">',
                    buttons: [{
                        extend: 'excelHtml5',
                        autoFilter: true,
                        }],
                    "serverSide": true,
                    "processing": true,
                    "filter": true,
                    "ordering": true,
                    "orderMulti": false,
                    "paging": true,
                    "ajax": {
                        "url": "/Student/LoadData",
                        "type": "POST",
                        async: true,
                        "datatype": "json"
                        },
                        "columnDefs":
                            [{
                                "targets": [0],
                                "visible": false,
                                "searchable": false
                            }],
                          scrollY:  true,
                          scrollX:  true,
                          scrollCollapse: false,
                          "columns": [
                              { "data": "ID", "name": "ID", "autoWidth": true },
                              { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                              { "data": "LastName", "name": "LastName", "autoWidth": true },
                              { "data": "Activity", "name": "Activity", "autoWidth": true, "searchable": true },
                              { "data": "Gender", "name": "Gender", "autoWidth": true },
                              { "data": "Ethnicity", "name": "Ethnicity", "autoWidth": true },
                              { "data": "International", "name": "International", "autoWidth": true },
                              { "data": "DualDegree", "name": "DualDegree", "autoWidth": true },
                              { "data": "EducationStatus", "name": "EducationStatus", "autoWidth": true },
                              { "data": "MonthsWorkExp", "name": "MonthsWorkExp", "autoWidth": true },
                              { "data": "GPA", "name": "GPA", "autoWidth": true},
                              { "data": "GMAT", "name": "GMAT", "autoWidth": true},
                              { "data": "University", "name": "University", "autoWidth": true },
                              { "data": "UndergradMajor", "name": "UndergradMajor", "autoWidth": true },
                              { "data": "Concentration", "name": "Concentration", "autoWidth": true },
                              { "data": "BannerID", "name": "BannerID", "autoWidth": true },
                              { "data": "StreetAddress", "name": "StreetAddress", "autoWidth": true },
                              { "data": "City", "name": "City", "autoWidth": true },
                              { "data": "State", "name": "State", "autoWidth": true },
                              { "data": "ZipCode", "name": "ZipCode", "autoWidth": true },
                              { "data": "PhoneNumber", "name": "PhoneNumber", "autoWidth": true },
                              { "data": "EmailAddress", "name": "EmailAddress", "autoWidth": true },
                              { "data": "DateOfBirth", "name": "DateOfBirth",
                                    "render": function(data, type, row){
                                        if(type === "sort" || type === "type"){
                                            return data;
                                            }
                                            return moment(data).format("MM/DD/YYYY");
                                     },
                                "autoWidth": true },
                              { "data": "SemesterAdvising", "name": "SemesterAdvising", "autoWidth": true },
                              { "data": "ProjectedGraduation", "name": "ProjectedGraduation", "autoWidth": true },
                              { "data": "Entry", "name": "Entry", "autoWidth": true },
                              { "title": "Actions",
                                "searchable": false,
                                "sortable": false,
                                "render": function (data, type, full, meta) {
                                    return '<a href="@Url.Action("Edit","Student")/' + full.ID + '">Edit</a> | <a href="@Url.Action("Details","Student")/' + full.ID + '">Details</a> | <a href="@Url.Action("Delete","Student")/' + full.ID + '">Delete</a>';
                                    }
                              }
                          ]
                     });

                    // Apply the search
                    table.columns().every( function () {
                        var that = this;
                 
                        $( 'input', this.footer() ).on( 'keyup change', function () {
                            if ( that.search() !== this.value ) {
                                that
                                    .search( this.value )
                                    .draw();
                            }
                        });
                    });
    });
</script>

Method from Controller -

public IActionResult LoadData()
        {
            try
            {
                var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
                // Skiping number of Rows count  
                var start = Request.Form["start"].FirstOrDefault();
                // Paging Length 10,20  
                var length = Request.Form["length"].FirstOrDefault();
                // Sort Column Name  
                var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
                // Sort Column Direction ( asc ,desc)  
                var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
                // Search Value from (Search box)  
                var searchValue = Request.Form["search[value]"].FirstOrDefault();

                //Paging Size (10,20,50,100)  
                int pageSize = length != null ? Convert.ToInt32(length) : 0;
                int skip = start != null ? Convert.ToInt32(start) : 0;
                int recordsTotal = 0;

                // Getting all Student data  
                var studentData = (from tempstudent in _context.Student
                                   select tempstudent);

                //Sorting
                if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))
                {
                    studentData = studentData.OrderBy(sortColumn + " " + sortColumnDirection);
                }

                //Search  
                if (!string.IsNullOrEmpty(searchValue))
                {
                    studentData = studentData.Where(m => m.LastName.ToLower().Contains(searchValue.ToLower()));
                }

                //total number of rows count   
                recordsTotal = studentData.Count();
                //Paging   
                var data = studentData.Skip(skip).Take(pageSize).ToList();
                //Returning Json Data  
                return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });

            }
            catch (Exception)
            {
                throw;
            }

        }

If anyone could help me with this, I would be greatly appreciative. Thanks.

This discussion has been closed.