Pagination class not getting applied in html
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>
Solution
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
angular.module("myApp", ['smart-table'])
.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: "7242431747s6716502"
},
{
botMainId: "A",
botSet: "HK74025",
botNumber: "3799431747067e4502"
},
{
botMainId: "A",
botSet: "HK74694",
botNumber: "82584317g706807002"
},
{
botMainId: "C",
botSet: "HK74819",
botNumber: "56354317470x6827202"
},
{
botMainId: "C",
botSet: "HK75964",
botNumber: "42364317470cxv6902802"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706xcv923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747069df23902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747069ewr23902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470sdf6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470s6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470vb6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747sdf06923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470sd6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317wer4706923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706sd923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470a923902"
}
];
ctrl.posibbleOptions = getUniqueValues(ctrl.display_republish_records, 'botMainId')
.map(optionsMapper);
ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
.map(optionsMapper);
ctrl.selectionModel = {};
ctrl.itemsByPage = 5;
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]))];
}
}]);.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 > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
<hr/>
<table st-table="$ctrl.display_republish_records" class="table table-striped">
<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> <tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="10" colspan="4">
</td>
</tr>
</tfoot>
</table>
<hr/>
</div>- Clear clipboard to prohibit unauthorised copying, insert message?
- Can you render a html file into a container?
- how to position two elements left and right
- Debounce in ReactJS
- Angular - Why isn't my dropdown list working
- Is [h6 aria-level="7"] a reliable way to create a [h7] element?
- There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit
- How can I prevent address bar from hiding in mobile browsers?
- How do you limit the number of options selected in an HTML <select> element?
- Is there an option on the IFrame element to load it before the dom page loaded event?
- Changing Font Color in HTML Email for AOL Mail
- TypeError: 'Locator' object is not callable using .first() in Playwright
- is form enctype "application/json" available?
- QTextBrowser not processing CSS properly
- Cannot remove bootstrap button border
- Unable to center navbar properly
- Popover on input field
- How to hide an element and all its children from screen readers?
- Force a line break in a URL
- Select text in ::before or ::after pseudo-element
- Trying to size div as percentages of the entire page
- Remove all style attributes from HTML in PHP
- Tooltips for mobile browsers
- How to open Windows Explorer via link
- Method 'POST' is not supported - Spring
- Monitor an images folder to get a live local html/javascript gallery
- Is call to preventDefault() really necessary on drop event?
- Use rvest to scrape all p after h? (or other R package)
- How to position two elements side by side using CSS
- Data not getting into the database