Question

我的html中有这个智能表，正在为其填充20行。我已将分页应用于这些记录，也可以正常工作。

我的问题是，分页类没有应用到分页栏。就像链接格式一样。

是否有其他班级与此重叠？我也在我的js中添加了智能表模块。

var app = angular.module('adminApp', ['smart-table', 'ngAnimate',
  'ngSanitize', 'ui.bootstrap'
]);

我的桌子：

<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>

我的分页：

更新：

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>

我使用的脚本：

<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>

Answer 1

默认情况下，智能表会应用bootstrap.css类的分页

以下是证明：http://lorenzofox3.github.io/smart-table-website/#section-pagination。

您的主要问题是您正在使用最新版本的引导程序，即4.1.0 Smart-Table使用3.3.6生成分页。我不知道他们何时可以向智能表提供更新。但是您可以应用此类来支持所需的框。

我已将css部分应用于演示。请在这里检查

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>

Answer 2

我还没有50位评论者...

您是否尝试过打开控制台（F12）并检查“样式”选项卡，以查看正在应用的样式以及从哪个样式表开始的样式？这可能会给您最大的洞察力。引导样式可能会覆盖您添加的样式。如果要使自定义样式覆盖自举样式，则必须在加载自举样式表之后添加其样式表，并且该样式表可能正在与智能表模块一起加载。

由于样式的级联性质，如果您在自己的样式表中将样式添加到分页中，然后引导加载并添加样式，它们将覆盖您的样式。

分页类未在HTML中应用

2 个答案: