angularjsangular-ui-bootstrapngtable

Bootstrap CSS compatibility with ngTable

I am working on AngularJs application. Versions - AngularJS - 1.8.2 Bootstrap.css - 2.3.2

I am integrating ngTable in the application. The pagination css is not working for ngTable. When i use bootstrap > 3 then it works but i can't change the bootstrap version in the application.

How do i make it work with bootstrap 2.3.2 css. enter image description here

https://plnkr.co/plunk/fM19jXmWsFrZaw6Z

  <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <title>
    
    AngularJs Table with ng-table module Example
    
    </title>
    
      <script src="https://code.angularjs.org/1.8.2/angular.js"></script>    
      
      <script src="http://code.angularjs.org/1.8.2/angular-resource.js"></script>    
    
    <link href="https://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"></script>
    
    <script type="text/javascript">
    
    var app = angular.module("ngtableApp", \["ngTable"\]);
    
    app.controller("ngtableCtrl", function ($scope, $filter, NgTableParams) {
    $scope.users =\[\];
    $scope.users = \[
        { name: "Madhav Sai", age: 10, location: 'Nagpur' },
        { name: "Suresh Dasari", age: 30, location: 'Chennai' },
        { name: "Rohini Alavala", age: 29, location: 'Chennai' },
        { name: "Praveen Kumar", age: 25, location: 'Bangalore' },
        { name: "Sateesh Chandra", age: 27, location: 'Vizag' },
        { name: "Siva Prasad", age: 38, location: 'Nagpur' },
        { name: "Sudheer Rayana", age: 25, location: 'Kakinada' },
        { name: "Honey Yemineni", age: 7, location: 'Nagpur' },
        { name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },
        { name: "Mahesh Dasari", age: 23, location: 'California' },
        { name: "Nagaraju Dasari", age: 34, location: 'Atlanta' },
        { name: "Gopi Krishna", age: 29, location: 'Repalle' },
        { name: "Sudheer Uppala", age: 19, location: 'Guntur' },
        { name: "Sushmita", age: 27, location: 'Vizag' }
    \];
    
    $scope.usersTable = new NgTableParams({
        page: 1,
        count: 5
    }, 
    {
        total: $scope.users.length,
        getData:function (params) {
                    console.log('params '+ params)
                    $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
                    $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
                   // $scope.data = $scope.data.slice(0, 20);
                    $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
    
                    return $scope.data;
    
                }
    
    });
    
    });
    
    </script>
    
    </head>
    
    <body ng-app="ngtableApp">
    
    <div ng-controller="ngtableCtrl">
    
    <h2>AngularJS ng-table Filtering Example</h2>
    
    <table ng-table ="usersTable" show-filter=true class="table table-bordered table-striped">
    
    <tr ng-repeat="user in data">
    
    <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">{{user.name}}</td>
    
    <td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">{{user.age}}</td>
    
    <td data-title="'Location'" sortable="'location'" filter="{ 'location': 'text' }">{{user.location}}</td>
    
    </tr>
    
    </table>
    
    </div>
    
    </body>
    
    </html>
Solution

  • i added below classes in the css file to make it work. updated the plunker - https://plnkr.co/edit/fM19jXmWsFrZaw6Z

    .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination>li {
    display: inline;
}

.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination>.active>a{
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}