table_footable.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <div class="bg-light lter b-b wrapper-md">
  2. <h1 class="m-n font-thin h3">Footable</h1>
  3. </div>
  4. <div class="wrapper-md">
  5. <div class="panel panel-default">
  6. <div class="panel-heading">
  7. Footable - make HTML tables on smaller devices look awesome
  8. </div>
  9. <div class="panel-body b-b b-light">
  10. Search: <input id="filter" type="text" class="form-control input-sm w-sm inline m-r"/>
  11. </div>
  12. <div>
  13. <table class="table m-b-none" ui-jq="footable" data-filter="#filter" data-page-size="5">
  14. <thead>
  15. <tr>
  16. <th data-toggle="true">
  17. First Name
  18. </th>
  19. <th>
  20. Last Name
  21. </th>
  22. <th data-hide="phone,tablet">
  23. Job Title
  24. </th>
  25. <th data-hide="phone,tablet" data-name="Date Of Birth">
  26. DOB
  27. </th>
  28. <th data-hide="phone">
  29. Status
  30. </th>
  31. </tr>
  32. </thead>
  33. <tbody>
  34. <tr>
  35. <td>Isidra</td>
  36. <td><a href>Boudreaux</a></td>
  37. <td>Traffic Court Referee</td>
  38. <td data-value="78025368997">22 Jun 1972</td>
  39. <td data-value="1"><span class="label bg-success" title="Active">Active</span></td>
  40. </tr>
  41. <tr>
  42. <td>Shona</td>
  43. <td>Woldt</td>
  44. <td><a href>Airline Transport Pilot</a></td>
  45. <td data-value="370961043292">3 Oct 1981</td>
  46. <td data-value="2"><span class="label bg-light" title="Disabled">Disabled</span></td>
  47. </tr>
  48. <tr>
  49. <td>Granville</td>
  50. <td>Leonardo</td>
  51. <td>Business Services Sales Representative</td>
  52. <td data-value="-22133780420">19 Apr 1969</td>
  53. <td data-value="3"><span class="label bg-warning" title="Suspended">Suspended</span>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td>Easer</td>
  58. <td>Dragoo</td>
  59. <td>Drywall Stripper</td>
  60. <td data-value="250833505574">13 Dec 1977</td>
  61. <td data-value="1"><span class="label bg-success" title="Active">Active</span></td>
  62. </tr>
  63. <tr>
  64. <td>Maple</td>
  65. <td>Halladay</td>
  66. <td>Aviation Tactical Readiness Officer</td>
  67. <td data-value="694116650726">30 Dec 1991</td>
  68. <td data-value="3"><span class="label bg-warning" title="Suspended">Suspended</span>
  69. </td>
  70. </tr>
  71. <tr>
  72. <td>Maxine</td>
  73. <td><a href>Woldt</a></td>
  74. <td><a href>Business Services Sales Representative</a></td>
  75. <td data-value="561440464855">17 Oct 1987</td>
  76. <td data-value="2"><span class="label bg-light" title="Disabled">Disabled</span></td>
  77. </tr>
  78. <tr>
  79. <td>Lorraine</td>
  80. <td>Mcgaughy</td>
  81. <td>Hemodialysis Technician</td>
  82. <td data-value="437400551390">11 Nov 1983</td>
  83. <td data-value="2"><span class="label bg-light" title="Disabled">Disabled</span></td>
  84. </tr>
  85. <tr>
  86. <td>Lizzee</td>
  87. <td><a href>Goodlow</a></td>
  88. <td>Technical Services Librarian</td>
  89. <td data-value="-257733999319">1 Nov 1961</td>
  90. <td data-value="3"><span class="label bg-warning" title="Suspended">Suspended</span>
  91. </td>
  92. </tr>
  93. <tr>
  94. <td>Judi</td>
  95. <td>Badgett</td>
  96. <td>Electrical Lineworker</td>
  97. <td data-value="362134712000">23 Jun 1981</td>
  98. <td data-value="1"><span class="label bg-success" title="Active">Active</span></td>
  99. </tr>
  100. <tr>
  101. <td>Lauri</td>
  102. <td>Hyland</td>
  103. <td>Blackjack Supervisor</td>
  104. <td data-value="500874333932">15 Nov 1985</td>
  105. <td data-value="3"><span class="label bg-warning" title="Suspended">Suspended</span>
  106. </td>
  107. </tr>
  108. </tbody>
  109. <tfoot class="hide-if-no-paging">
  110. <tr>
  111. <td colspan="5" class="text-center">
  112. <ul class="pagination"></ul>
  113. </td>
  114. </tr>
  115. </tfoot>
  116. </table>
  117. </div>
  118. </div>
  119. </div>