ruby on rails - Bootstrap Table GET JSON Data -

so trying make bootstrap table search , sorting data coming calll

   <table id="example" class="table table-bordered table-striped table-hover" data-search="true">     <thead>       <tr class="text-white clickable-row" bgcolor="#578ebe" >         <th id="white-text"> # </th>         <th id="white-text"> name </th>         <th id="white-text"> dba </th>         <th id="white-text"> facility id </th>         <th id="white-text"> active </th>       </tr>     </thead>     <tbody>       <tr ng-repeat="hospital in hospital_filtered = hospitals">         <td> <a ng-click="click(hospital)"> {{ hospital.hospital_id }} </td>         <td> <a ng-click="click(hospital)"> {{ hospital.hospital_name }} </td>         <td> <a ng-click="click(hospital)"> {{ hospital.hospital_dba }} </td>         <td> <a ng-click="click(hospital)"> {{ hospital.facility_id }} </td>         <td> <a ng-click="click(hospital)"> {{ hospital.active_flag }} </td>       </tr>     </tbody>   </table> 

here make call api. data coming in, bootstrap table sorting , sort not working. how populate bootstrap table call?

$http.get("/hospitals/all", {           params: {authtoken: $rootscope.auth_token}}         )         .then(function(response) {           // request completed           //console.log(response);           $scope.hospitals=response.data          }, function(x) {           // request error           console.log("error");         });       }); 

you're correctly fetching data, iteration wrong.

html:

<input ng-model="searchkeyword" type="text"> <table id="example" class="table table-bordered table-striped table-hover" data-search="true"> <thead>   <tr class="text-white clickable-row" bgcolor="#578ebe" >     <th id="white-text" ng-click="changesort('hospital_id')"> # </th>     <th id="white-text" ng-click="changesort('hospital_name')"> name </th>     <th id="white-text" ng-click="changesort('hospital_dba')"> dba </th>     <th id="white-text" ng-click="changesort('facility_id')"> facility id </th>     <th id="white-text" ng-click="changesort('active_flag')"> active </th>   </tr> </thead> <tbody>   <tr ng-repeat="hospital in hospitals | filter: searchkeyword | orderby: orderkeyword">     <td> <a ng-click="click(hospital)"> {{ hospital.hospital_id }} </td>     <td> <a ng-click="click(hospital)"> {{ hospital.hospital_name }} </td>     <td> <a ng-click="click(hospital)"> {{ hospital.hospital_dba }} </td>     <td> <a ng-click="click(hospital)"> {{ hospital.facility_id }} </td>     <td> <a ng-click="click(hospital)"> {{ hospital.active_flag }} </td>   </tr> </tbody> </table> 

the javascript part:

$scope.orderkeyword = 'hospital_name'; $scope.changesort = function(sortattr) {   $scope.orderkeyword = sortattr; }; 

filter: searchkeyword use keyword typed additional input-field. way can "search" table. results left ordered (orderby) attribute-name that's stored inside $scope.orderkeyword. initialized hospital_name.

you may add additional logic how strict filtering , direction sorting supposed be.

here's documentation 2 filters in question:

https://docs.angularjs.org/api/ng/filter/orderby

https://docs.angularjs.org/api/ng/filter/filter