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. }

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

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

  25. #myTable th, #myTable td {
  26.   text-align: left;
  27.   padding: 12px;
  28. }

  29. #myTable tr {
  30.   border-bottom: 1px solid #ddd;
  31. }

  32. #myTable tr.header, #myTable tr:hover {
  33.   background-color: #f1f1f1;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38.  
  39. <h2>My Customers</h2>

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

  95. <script>


  96. </script>

  97. </body>
  98. </html>

Srk