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;  
    5.   
    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.         }  
    8.   
    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.             };  
    74.   
    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>  
    28.          
    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({  
    36.   
    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.         });  
    59.   
    60.         function tblFormate() {  
    61.   
    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.         }  
    77.           
    78.     });  
    79. </script>  
    80.   
    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.

  1. function tblFormate() {  
  2.   
  3.        // Convert normal table to Ajax table with default design   
  4. var table = $('#tblPopulation').DataTable(  
  5.              {  
  6.                  "lengthMenu": [[5, 10, 50, 100, 150, -1], [5, 10, 50, 100, 150, "All"]]  
  7.              });  
  8.             //Each column seach based on columns   
  9.             table.columns().eq(0).each(function (colIdx) {  
  10.                 $('input', table.column(colIdx).header()).on('keyup change'function () {  
  11.                     table  
  12.                         .column(colIdx)  
  13.                         .search(this.value)  
  14.                         .draw();  
  15.                 });  
  16.             });  
  17.         }  
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.