Question posted in 
I am having this smart-table in my html, for which 20 rows are getting populated. I have applied pagination to these records, which too is working fine.
My issue is that, the pagination class is not getting applied to the pagination bar. It is just like a link format.
Is some other class getting overlapped with this? I have added the smart-table module in my js too.
var app = angular.module('adminApp', ['smart-table', 'ngAnimate',
'ngSanitize', 'ui.bootstrap'
]);
My table:
<table id="botRecordTable" st-table="display_bot_records" st-safe-src="botData" ng-show="botData" class="table table-bordered table-striped shadow p-3 mb-5 bg-white rounded" ng-controller="botRulesController">
<caption style="font-size:0.8rem !important">*BOT Rules.</caption>
<thead class="thead-dark">
<tr>
<th>CASE NO</th>
<th st-sort="decision">RULE</th>
<th st-sort="email">EMAIL</th>
<th st-sort="dob">DOB</th>
<th st-sort="gender">GENDER</th>
</tr>
</thead>
<tbody>
<tr valign="middle" id="{{row.matchPk}}" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_bot_records">
<td>{{$index + 1}}</td>
<td>
<select id="ruleChangeSelect" ng-change="botRuleChanged()" class="custom-select" style="margin-left:0px; width:auto" ng-model="botDecision" ng-options="choice.name for choice in botDecisions">
</select>
</td>
<td ng-bind="row.email"></td>
<td ng-bind="row.dob"></td>
<td ng-bind="row.gender"></td>
</tr>
</tbody>
<tfoot>
<tr style="font-size:0.8rem !important;">
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
My pagination:
UPDATE:
angular.module("myApp", [])
.constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
.controller("MyController", ['POSSIBLE_OPTIONS', function(POSSIBLE_OPTIONS) {
var ctrl = this;
ctrl.display_republish_records = [{
botMainId: "A",
botSet: "HK64604",
botNumber: "786443174705883702"
},
{
botMainId: "A",
botSet: "HK65825",
botNumber: "595143174706013402"
},
{
botMainId: "A",
botSet: "HK67383",
botNumber: "281943174706142702"
},
{
botMainId: "B",
botSet: "HK72557",
botNumber: "922443174706654102"
},
{
botMainId: "B",
botSet: "HK73332",
botNumber: "724243174706716502"
},
{
botMainId: "A",
botSet: "HK74025",
botNumber: "379943174706764502"
},
{
botMainId: "A",
botSet: "HK74694",
botNumber: "825843174706807002"
},
{
botMainId: "C",
botSet: "HK74819",
botNumber: "563543174706827202"
},
{
botMainId: "C",
botSet: "HK75964",
botNumber: "423643174706902802"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706923902"
}
];
ctrl.posibbleOptions = getUniqueValues(ctrl.display_republish_records, 'botMainId')
.map(optionsMapper);
ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
.map(optionsMapper);
ctrl.selectionModel = {};
angular.forEach(ctrl.display_republish_records, function(bot) {
ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function(opt) {
return opt.id === bot.botMainId;
})[0];
});
function optionsMapper(id) {
return {
id: id,
name: id
}
}
function getUniqueValues(array, prop) {
return [...new Set(array.map(item => item[prop]))];
}
}]);<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
<hr/>
<table>
<tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in $ctrl.display_republish_records track by row.botNumber" ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
<td>
<select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]" ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
<option value="" hidden readonly="" ng-hide="true"></option>
</select>
</td>
<td ng-bind="row.botSet"></td>
<td ng-bind="row.botNumber"></td>
</tr>
<tr style="font-size:0.8rem !important;">
<td class="text-center" st-pagination="" st-items-by-page="3">
</td>
</tr>
</table>
<hr/>
</div>The scripts I use:
<head>
<link rel="icon" type="image/png" href="images/app_brand.png"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" th:href="@{/css/app.css}" href="../../css/app.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Nunito:300" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.min.js.map"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
2
Answers
I don’t have the 50 rep to comment yet…
Have you tried opening the console (F12) and checking the styles tab to see which styles are being applied and from which stylesheet(s)? That’ll probably give you the most insight. It is likely that the bootstrap styles are overriding the ones you added. If you want custom styles to override the bootstrap ones, you’d have to add your stylesheet after the bootstrap stylesheet is loaded, and it’s probably loading with the smart table module.
Due to the cascading nature of styles, if you add styles to the pagination in your own stylesheet and then bootstrap loads and adds styles, they’ll override your styles.
Smart-table by default applies the pagination of the bootstrap.css classes
Here is the proof of it: http://lorenzofox3.github.io/smart-table-website/#section-pagination.
The main problem of yours is you are using the latest version of bootstrap which is 4.1.0
and smart-table generates the paging by using 3.3.6. I do not know when they can provide the updates to the smart-table. but you can apply this classes to support the box you want.
I have applied the css sections to the demo. Please check here