2
Answers

Filter html table

Aamir Khan

Aamir Khan
8y
294
1
Hi friends,
 
I have requirement that html table should get filtered on basis of a 1st column values, that will be entered by search Textbox.
how do i show/filter html table on the values entered from 1st column in the search textbox.
Paging should also work.
 
Please let me know.
 
Regards,
Aaamir 
Answers (2)
0
Rajeesh Menoth

Rajeesh Menoth

NA 24.7k 629.6k 8y
Hi,
Please check this reference :
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_filters_tables
http://www.javascripttoolbox.com/lib/table/
-2
Bikesh Srivastava

Bikesh Srivastava

NA 19.8k 835.1k 8y
Use this code if you are angularjs developer.
  1. <!DOCTYPEhtml>
  2. <htmlng-app=EmployeeApp>
  4. <head>
  5. <scriptdata-require="angular.js@1.2.0-rc3"data-semver="1.2.0-rc3"src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
  6. <linkrel="stylesheet"href="style.css"/>
  7. <scriptsrc="script.js"></script>
  8. </head>
  10. <bodyng-controller="empCtrl">
  11. <table>
  12. <tr>
  13. <tdalign="right">Search:</td>
  14. <td><inputng-model="query[queryBy]"/></td>
  15. </tr>
  16. <tr>
  17. <tdalign="right">SearchBy:</td>
  18. <td>
  19. <selectng-model="queryBy">
  20. <optionvalue="$"></option>
  21. <optionvalue="name">NAME</option>
  22. <optionvalue="company">COMPANY</option>
  23. <optionvalue="designation">DESIGNATION</option>
  24. </select>
  25. </td>
  26. </tr>
  27. </table>
  28. <hr>
  29. <div>
  30. <table>
  31. <tr>
  32. <th>EmployeeName</th>
  33. <th>CompanyName</th>
  34. <th>Designation</th>
  35. </tr>
  36. <trng-repeat="empinemployees|filter:query">
  37. <td>{{emp.name}}</td>
  38. <td>{{emp.company}}</td>
  39. <td>{{emp.designation}}</td>
  40. </tr>
  41. </table>
  42. </div>
  43. </body>
  45. </html>
Next Recommended Forum