Bootstrap Table Design with JavaScript

<div class="fresh-table full-color-orange"> <div class="toolbar"> <button id="alertBtn" class="btn btn-default">Students Table</button> </div> <table id="fresh-table" class="table"> <thead> <th data-field="name">Student`s Name</th> <th data-field="father_name">Father`s Name</th> <th data-field="class">Class</th> <th data-field="section">Section</th> <th data-field="address">Address</th> </thead> <tbody> <% @members.each do |member|%> <tr> <td><%=member.name%></td> <td><%=member.father_name%></td> <td><%=member.mystream.name%></td> <td><%=member.devison.sec%></td> <td><%=member.address%></td> <td><%= link_to 'Edit', edit_member_path(member) %></td> </tr> <% end %> </tbody> </table> </div> <% if current_user.role == "admin" %> <%= link_to "Add New Student",new_member_path,class: "abc"%> <%end %> <!-- Javascript --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.js"></script> <script type="text/javascript"> var $table = $('#fresh-table') var $alertBtn = $('#alertBtn') function operateFormatter(value, row, index) { return [ ].join('') } $(function () { $table.bootstrapTable({ classes: 'table table-hover table-striped', toolbar: '.toolbar', search: true, showToggle: true, showColumns: true, pagination: true, striped: true, sortable: true, pageSize: 8, pageList: [6, 8, 10, 25, 50, 100], formatShowingRows: function (pageFrom, pageTo, totalRows) { return '' }, formatRecordsPerPage: function (pageNumber) { return pageNumber + ' rows visible' } }) }) </script> <style type="text/css"> body{ background: #938982; /* Old browsers */ background: url('../img/bg.jpg'); background-size: cover; height: 100vh; background-attachment: fixed; background-size: 100% 100%; } .fresh-table{ margin-top: 45px; box-shadow: -15px 27px 69px rgba(0,0,0,.30); margin-bottom: 50px; } @media (min-width: 992px){ .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: right; } @charset "UTF-8"; .margin-top { margin-top: 50px; } .btn { border-width: 2px; background-color: transparent; font-weight: 600; opacity: 0.7; filter: alpha(opacity=70); padding: 8px 16px; border-color: #AAAAAA; color: #AAAAAA; } .form-control { background-color: #FFFFFF; border: 2px solid #AAAAAA; border-radius: 30px; font-weight: 600; color: #666666; padding: 8px 16px; height: 40px; -webkit-box-shadow: none; box-shadow: none; opacity: 0.7; filter: alpha(opacity=70); } /*# sourceMappingURL=fresh-bootstrap-table.css.map */ </style>