Search Function In Each Column Using AJAX Table In ASP.NET MVC

Introduction

This article explains how to implement search functionality to each column as well as implement common search using AJAX table in ASP.NET MVC.

Background

We use tables or grids in our application but users expect different functionalities in tables and grids. This article explains how to make search functionality for each field in tables. We can make common and separate field search functionality using AJAX table, jQuery and passing data as a JSON format to table. It is very helpful to users.

Steps For Create Ajax Table

1. Add a class in model like below.
   
   1. using System;
   2. using System.Collections.Generic;
   3. using System.Linq;
   4. using System.Web;
   6. namespace AjaxTable.Models
   7. {
   8. public class Country
   9. {
   10. public int Rank { get; set; }
   11. public string CountryName { get; set; }
   12. public int pulation { get; set; }
   13. }
   14. }
2. Add new controls and action methods and add action methods and method in controllers, like the below coding.
   
   1. public class TableController : Controller
   2. {
   3. // GET: Table
   4. public ActionResult Index()
   5. {
   6. return View();
   7. }
   9. private List<Country> GetPopulation()
   10. {
   11. var populationList = new List<Country>
   12. {
   13. new Country
   14. {
   15. Rank = 1,
   16. CountryName = "Chine",
   17. pulation = 1367485388
   18. },
   19. new Country
   20. {
   21. Rank = 2,
   22. CountryName = "India",
   23. pulation = 1251695584
   24. },
   25. new Country
   26. {
   27. Rank = 3,
   28. CountryName = "United State",
   29. pulation = 321368864
   30. },
   31. new Country
   32. {
   33. Rank = 4,
   34. CountryName = "Indonesia",
   35. pulation = 255993674
   36. },
   37. new Country
   38. {
   39. Rank = 5,
   40. CountryName = "Brazil",
   41. pulation = 204259812
   42. },
   43. new Country
   44. {
   45. Rank = 6,
   46. CountryName = "Pakistan",
   47. pulation = 199085847
   48. },
   49. new Country
   50. {
   51. Rank = 7,
   52. CountryName = "Nigeria",
   53. pulation = 181562056
   54. },
   55. new Country
   56. {
   57. Rank = 8,
   58. CountryName = "Bangladesh",
   59. pulation = 168957745
   60. },
   61. new Country
   62. {
   63. Rank = 9,
   64. CountryName = "Russia",
   65. pulation = 142423773
   66. },
   67. new Country
   68. {
   69. Rank = 10,
   70. CountryName = "Japan",
   71. pulation = 126919659
   72. }
   73. };
   75. return populationList;
   76. }
   77. public ActionResult getPopulation()
   78. {
   79. var population = GetPopulation();
   80. return Json(population);
   81. }
   82. }
3. Add view for corresponding action methods. After adding view we need to add three important CDNs in our view.
   
   CDN for Table Styles
   
   1. <link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
   CDN for jQuery
   
   1. <script src="//code.jquery.com/jquery-1.12.3.js"></script>
   2. <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
   3. View Page Code
   4. @{
   5. ViewBag.Title = "Index";
   6. }
   7. <link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
   8. <h2>Ajax Table Columns Search</h2>
   9. <table id="tblPopulation">
   10. <thead>
   11. <tr>
   12. <td>Rank</td>
   13. <td>Country Name</td>
   14. <td>Population</td>
   15. </tr>
   16. <tr>
   17. <td>
   18. <input type="text" />
   19. </td>
   20. <td>
   21. <input type="text" />
   22. </td>
   23. <td>
   24. <input type="text"/>
   25. </td>
   26. </tr>
   27. </thead>
   29. </table>
   30. @section Scripts {
   31. <script src="//code.jquery.com/jquery-1.12.3.js"></script>
   32. <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
   33. <script>
   34. $(document).ready(function () {
   35. $.ajax({
   37. url: '/Table/getPopulation',
   38. dataType: "json",
   39. type: "POST",
   40. contentType: 'application/json; charset=utf-8',
   41. data: {},
   42. success: function (data) {
   43. var tr;
   44. console.log(data);
   45. for (var i = 0; i < data.length; i++) {
   46. tr = tr + "<tr>";
   47. tr = tr + "<td>" + data[i].Rank + "</td>";
   48. tr = tr + "<td>" + data[i].CountryName + "</td>";
   49. tr = tr + "<td>" + data[i].population + "</td>";
   50. tr = tr + "</tr>";
   51. }
   52. $('#tblPopulation').append(tr);
   53. tblFormate();
   54. },
   55. error: function (xhr) {
   56. alert('No Valid Data');
   57. }
   58. });
   60. function tblFormate() {
   62. var table = $('#tblPopulation').DataTable(
   63. {
   64. //"searching": false,
   65. "lengthMenu": [[5, 10, 50, 100, 150, -1], [5, 10, 50, 100, 150, "All"]]
   66. });
   67. //Apply the search
   68. table.columns().eq(0).each(function (colIdx) {
   69. $('input', table.column(colIdx).header()).on('keyup change', function () {
   70. table
   71. .column(colIdx)
   72. .search(this.value)
   73. .draw();
   74. });
   75. });
   76. }
   78. });
   79. </script>
   81. }

Explanation

We added table heading as well as added text box for each column. We will be filtering data using corresponding text boxes. Using AJAX, we call the action methods from View to Controller and pass the data as a JSON from controller to view. JSON data will be appended to the tables.

We created one function for column search and normal table converted to an AJAX table with default design.

Following function is very important to each column search.

Final Step

After adding the above mentioned code just build and run the applications and we can see the output looks like the below screen shorts.


After Column Search


Conclusion

I hope this article explains in a simple way, how to create each column search in ASP.Net MVC; and it helps many freshers and students.