如何让ngTable分页样式兼容Bootstrap 2.3.2（AngularJS 1.8.2）

问题背景 #

基于AngularJS 1.8.2开发的应用，使用Bootstrap.css 2.3.2版本，集成ngTable 1.0.0后分页样式异常，无法升级Bootstrap版本，需要适配现有Bootstrap 2.3.2的分页样式。

解决思路 #

ngTable 1.0.0的分页组件默认采用Bootstrap 3+的CSS类结构，而Bootstrap 2.3.2的分页类差异较大。通过添加自定义CSS覆盖ngTable的分页样式，使其匹配Bootstrap 2.3.2的视觉规范，同时保证自定义样式优先级高于原有样式。

具体实现 #

1. 添加自定义适配CSS #

在页面的<head>中，引入ngTable样式之后添加以下自定义CSS：

/* 适配Bootstrap 2.3.2的ngTable分页样式 */
.ng-table-pagination {
  margin: 20px 0;
}
.ng-table-pagination .pagination {
  margin: 0;
}
.ng-table-pagination .pagination ul {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ng-table-pagination .pagination ul > li {
  display: inline;
}
.ng-table-pagination .pagination ul > li > a,
.ng-table-pagination .pagination ul > li > span {
  float: left;
  padding: 4px 12px;
  line-height: 20px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left-width: 0;
}
.ng-table-pagination .pagination ul > li > a:hover,
.ng-table-pagination .pagination ul > li > a:focus,
.ng-table-pagination .pagination ul > .active > a,
.ng-table-pagination .pagination ul > .active > span {
  background-color: #f5f5f5;
}
.ng-table-pagination .pagination ul > .active > a,
.ng-table-pagination .pagination ul > .active > span {
  color: #999999;
  cursor: default;
}
.ng-table-pagination .pagination ul > .disabled > span,
.ng-table-pagination .pagination ul > .disabled > a,
.ng-table-pagination .pagination ul > .disabled > a:hover,
.ng-table-pagination .pagination ul > .disabled > a:focus {
  color: #999999;
  cursor: default;
  background-color: transparent;
}
.ng-table-pagination .pagination ul > li:first-child > a,
.ng-table-pagination .pagination ul > li:first-child > span {
  border-left-width: 1px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
}
.ng-table-pagination .pagination ul > li:last-child > a,
.ng-table-pagination .pagination ul > li:last-child > span {
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}
.ng-table-pagination .pagination-centered {
  text-align: center;
}
.ng-table-pagination .pagination-right {
  text-align: right;
}
.ng-table-pagination .pagination-page-size {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}
.ng-table-pagination .pagination-page-size select {
  margin-bottom: 0;
}

2. 完整修改后的代码 #

<!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>
    <!-- 自定义适配Bootstrap 2.3.2的ngTable分页样式 -->
    <style type="text/css">
        /* 适配Bootstrap 2.3.2的ngTable分页样式 */
        .ng-table-pagination {
          margin: 20px 0;
        }
        .ng-table-pagination .pagination {
          margin: 0;
        }
        .ng-table-pagination .pagination ul {
          display: inline-block;
          margin-bottom: 0;
          margin-left: 0;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        .ng-table-pagination .pagination ul > li {
          display: inline;
        }
        .ng-table-pagination .pagination ul > li > a,
        .ng-table-pagination .pagination ul > li > span {
          float: left;
          padding: 4px 12px;
          line-height: 20px;
          text-decoration: none;
          background-color: #ffffff;
          border: 1px solid #dddddd;
          border-left-width: 0;
        }
        .ng-table-pagination .pagination ul > li > a:hover,
        .ng-table-pagination .pagination ul > li > a:focus,
        .ng-table-pagination .pagination ul > .active > a,
        .ng-table-pagination .pagination ul > .active > span {
          background-color: #f5f5f5;
        }
        .ng-table-pagination .pagination ul > .active > a,
        .ng-table-pagination .pagination ul > .active > span {
          color: #999999;
          cursor: default;
        }
        .ng-table-pagination .pagination ul > .disabled > span,
        .ng-table-pagination .pagination ul > .disabled > a,
        .ng-table-pagination .pagination ul > .disabled > a:hover,
        .ng-table-pagination .pagination ul > .disabled > a:focus {
          color: #999999;
          cursor: default;
          background-color: transparent;
        }
        .ng-table-pagination .pagination ul > li:first-child > a,
        .ng-table-pagination .pagination ul > li:first-child > span {
          border-left-width: 1px;
          -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
          -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
          -moz-border-radius-bottomleft: 4px;
          -moz-border-radius-topleft: 4px;
        }
        .ng-table-pagination .pagination ul > li:last-child > a,
        .ng-table-pagination .pagination ul > li:last-child > span {
          -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
          -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
          -moz-border-radius-topright: 4px;
          -moz-border-radius-bottomright: 4px;
        }
        .ng-table-pagination .pagination-centered {
          text-align: center;
        }
        .ng-table-pagination .pagination-right {
          text-align: right;
        }
        .ng-table-pagination .pagination-page-size {
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
        }
        .ng-table-pagination .pagination-page-size select {
          margin-bottom: 0;
        }
    </style>
    <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) {
                    $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((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>

内容的提问来源于stack exchange，提问作者Pinki Sharma