Pagination class not getting applied in html
1
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>
html angularjs smart-table
asked Nov 14 '18 at 10:07
MichaelMichael
101117
|
show 3 more comments
1
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>
html angularjs smart-table
asked Nov 14 '18 at 10:07
MichaelMichael
101117
as per their website it seems that they are using bootstrap pagination to design the footer, lorenzofox3.github.io/smart-table-website/#section-pagination. Did you tried that?
– Just code
Nov 21 '18 at 12:13
Yes @Just Code. I used the same.
– Michael
Nov 21 '18 at 12:21
Did you include the bootstrap.css? Can you create demo to reproduce the problem?
– Just code
Nov 21 '18 at 12:29
Hi Just code. I have made a example simplified code snippet.
– Michael
Nov 24 '18 at 5:07
as far as I know you just need to include some css or bootstrap css, that should work.
– Just code
Nov 24 '18 at 5:10
|
show 3 more comments
1
1
1
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>
html angularjs smart-table
asked Nov 14 '18 at 10:07
MichaelMichael
101117
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>
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>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>html angularjs smart-table
html angularjs smart-table
asked Nov 14 '18 at 10:07
MichaelMichael
101117
asked Nov 14 '18 at 10:07
MichaelMichael
101117
edited Nov 24 '18 at 7:38
Michael
asked Nov 14 '18 at 10:07
MichaelMichael
101117
asked Nov 14 '18 at 10:07
MichaelMichael
101117
asked Nov 14 '18 at 10:07
MichaelMichael
101117
101117
as per their website it seems that they are using bootstrap pagination to design the footer, lorenzofox3.github.io/smart-table-website/#section-pagination. Did you tried that?
– Just code
Nov 21 '18 at 12:13
Yes @Just Code. I used the same.
– Michael
Nov 21 '18 at 12:21
Did you include the bootstrap.css? Can you create demo to reproduce the problem?
– Just code
Nov 21 '18 at 12:29
Hi Just code. I have made a example simplified code snippet.
– Michael
Nov 24 '18 at 5:07
as far as I know you just need to include some css or bootstrap css, that should work.
– Just code
Nov 24 '18 at 5:10
|
show 3 more comments
as per their website it seems that they are using bootstrap pagination to design the footer, lorenzofox3.github.io/smart-table-website/#section-pagination. Did you tried that?
– Just code
Nov 21 '18 at 12:13
Yes @Just Code. I used the same.
– Michael
Nov 21 '18 at 12:21
Did you include the bootstrap.css? Can you create demo to reproduce the problem?
– Just code
Nov 21 '18 at 12:29
Hi Just code. I have made a example simplified code snippet.
– Michael
Nov 24 '18 at 5:07
as far as I know you just need to include some css or bootstrap css, that should work.
– Just code
Nov 24 '18 at 5:10
as per their website it seems that they are using bootstrap pagination to design the footer, lorenzofox3.github.io/smart-table-website/#section-pagination. Did you tried that?
– Just code
Nov 21 '18 at 12:13
as per their website it seems that they are using bootstrap pagination to design the footer, lorenzofox3.github.io/smart-table-website/#section-pagination. Did you tried that?
– Just code
Nov 21 '18 at 12:13
Yes @Just Code. I used the same.
– Michael
Nov 21 '18 at 12:21
Yes @Just Code. I used the same.
– Michael
Nov 21 '18 at 12:21
Did you include the bootstrap.css? Can you create demo to reproduce the problem?
– Just code
Nov 21 '18 at 12:29
Did you include the bootstrap.css? Can you create demo to reproduce the problem?
– Just code
Nov 21 '18 at 12:29
Hi Just code. I have made a example simplified code snippet.
– Michael
Nov 24 '18 at 5:07
Hi Just code. I have made a example simplified code snippet.
– Michael
Nov 24 '18 at 5:07
as far as I know you just need to include some css or bootstrap css, that should work.
– Just code
Nov 24 '18 at 5:10
as far as I know you just need to include some css or bootstrap css, that should work.
– Just code
Nov 24 '18 at 5:10
|
show 3 more comments
2 Answers
2
active
oldest
votes
1
+50
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>answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
That's much helpful info @Just Code. !! So, the pagination UI is yet to be developed for the current bootstrap version I'm using. That was why it wasn't working. Cool. Thanks again :)
– Michael
Nov 24 '18 at 9:05
add a comment |
0
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.
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
Hi Jordan. I have tried doing your recommendation. My other functionalities doesn't seem to work if I do so.
– Michael
Nov 24 '18 at 5:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297612%2fpagination-class-not-getting-applied-in-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
+50
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>answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
That's much helpful info @Just Code. !! So, the pagination UI is yet to be developed for the current bootstrap version I'm using. That was why it wasn't working. Cool. Thanks again :)
– Michael
Nov 24 '18 at 9:05
add a comment |
1
+50
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>answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
That's much helpful info @Just Code. !! So, the pagination UI is yet to be developed for the current bootstrap version I'm using. That was why it wasn't working. Cool. Thanks again :)
– Michael
Nov 24 '18 at 9:05
add a comment |
1
+50
1
+50
1
+50
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>answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
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>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>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>answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
answered Nov 24 '18 at 8:15
Just codeJust code
10.4k53066
10.4k53066
That's much helpful info @Just Code. !! So, the pagination UI is yet to be developed for the current bootstrap version I'm using. That was why it wasn't working. Cool. Thanks again :)
– Michael
Nov 24 '18 at 9:05
add a comment |
That's much helpful info @Just Code. !! So, the pagination UI is yet to be developed for the current bootstrap version I'm using. That was why it wasn't working. Cool. Thanks again :)
– Michael
Nov 24 '18 at 9:05
That's much helpful info @Just Code. !! So, the pagination UI is yet to be developed for the current bootstrap version I'm using. That was why it wasn't working. Cool. Thanks again :)
– Michael
Nov 24 '18 at 9:05
That's much helpful info @Just Code. !! So, the pagination UI is yet to be developed for the current bootstrap version I'm using. That was why it wasn't working. Cool. Thanks again :)
– Michael
Nov 24 '18 at 9:05
add a comment |
0
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.
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
Hi Jordan. I have tried doing your recommendation. My other functionalities doesn't seem to work if I do so.
– Michael
Nov 24 '18 at 5:08
add a comment |
0
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.
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
Hi Jordan. I have tried doing your recommendation. My other functionalities doesn't seem to work if I do so.
– Michael
Nov 24 '18 at 5:08
add a comment |
0
0
0
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.
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
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.
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
answered Nov 21 '18 at 18:20
Jordan StubblefieldJordan Stubblefield
565
565
Hi Jordan. I have tried doing your recommendation. My other functionalities doesn't seem to work if I do so.
– Michael
Nov 24 '18 at 5:08
add a comment |
Hi Jordan. I have tried doing your recommendation. My other functionalities doesn't seem to work if I do so.
– Michael
Nov 24 '18 at 5:08
Hi Jordan. I have tried doing your recommendation. My other functionalities doesn't seem to work if I do so.
– Michael
Nov 24 '18 at 5:08
Hi Jordan. I have tried doing your recommendation. My other functionalities doesn't seem to work if I do so.
– Michael
Nov 24 '18 at 5:08
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297612%2fpagination-class-not-getting-applied-in-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
as per their website it seems that they are using bootstrap pagination to design the footer, lorenzofox3.github.io/smart-table-website/#section-pagination. Did you tried that?
– Just code
Nov 21 '18 at 12:13
Yes @Just Code. I used the same.
– Michael
Nov 21 '18 at 12:21
Did you include the bootstrap.css? Can you create demo to reproduce the problem?
– Just code
Nov 21 '18 at 12:29
Hi Just code. I have made a example simplified code snippet.
– Michael
Nov 24 '18 at 5:07
as far as I know you just need to include some css or bootstrap css, that should work.
– Just code
Nov 24 '18 at 5:10