JQuery data-table with individual filter / search column

JQuery data-table with individual filter / search column

Dear Contributors ,

I required you all support , Actually I am professional in manual testing and now started working on programming.

My client has given me the work to have data-table with filter drop-downs for each column for the below html table using jquery with.

Can any one please help me how can I do it.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. * {
  7.   box-sizing: border-box;
  8. }

  10. #myInput {
  11.   background-image: url('/css/searchicon.png');
  12.   background-position: 10px 10px;
  13.   background-repeat: no-repeat;
  14.   width: 100%;
  15.   font-size: 16px;
  16.   padding: 12px 20px 12px 40px;
  17.   border: 1px solid #ddd;
  18.   margin-bottom: 12px;
  19. }

  21. #myTable {
  22.   border-collapse: collapse;
  23.   width: 100%;
  24.   border: 1px solid #ddd;
  25.   font-size: 18px;
  26. }

  28. #myTable th, #myTable td {
  29.   text-align: left;
  30.   padding: 12px;
  31. }

  33. #myTable tr {
  34.   border-bottom: 1px solid #ddd;
  35. }

  37. #myTable tr.header, #myTable tr:hover {
  38.   background-color: #f1f1f1;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43.  
  44. <h2>My Customers</h2>

  45. <table id="myTable">
  46.   <tr class="header">
  47.     <th style="width:60%;">Name</th>
  48.     <th style="width:40%;">Country</th>
  49.     <th style="width:40%;">Designation</th>
  50.   </tr>
  51.   <tr>
  52.     <td>Alfreds Futterkiste</td>
  53.     <td>Germany</td>
  54.     <td>Engineer</td>
  55.   </tr>
  56.  
  57.   <tr>
  58.     <td>Alfreds Futterkist</td>
  59.     <td>UK</td>
  60.     <td>Engineer</td>
  61.   </tr>
  62.   
  63.   <tr>
  64.     <td>Alfreds Futterkiste</td>
  65.     <td>Germany</td>
  66.     <td>Operations Manager</td>
  67.   </tr>
  68.   
  69.   <tr>
  70.     <td>Koniglich Essen</td>
  71.     <td>Germany</td>
  72.     <td>Engineer</td>
  73.   </tr>
  74.   <tr>
  75.     <td>Koniglich Essen</td>
  76.     <td>Italy</td>
  77.     <td>Operations Manager</td>
  78.   </tr>
  79.   <tr>
  80.     <td>Koniglich Essen</td>
  81.     <td>Italy</td>
  82.     <td>HR</td>
  83.   </tr>
  84.   <tr>
  85.     <td>Paris specialites</td>
  86.     <td>UK</td>
  87.     <td>Engineer</td>
  88.   </tr>
  89.   <tr>
  90.     <td>Paris specialites</td>
  91.     <td>France</td>
  92.     <td>HR</td>
  93.   </tr>
  94.    <tr>
  95.     <td>Paris specialites</td>
  96.     <td>France</td>
  97.     <td>Operations Manager</td>
  98.   </tr>
  99. </table>

  101. <script>


  104. </script>

  106. </body>
  107. </html>

Srk