Класс нумерации страниц не применяется в HTML - PullRequest
Новая
       16

Класс нумерации страниц не применяется в HTML

0 голосов
/ 14 ноября 2018

У меня есть смарт-таблица в моем 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>

Моя нумерация страниц :

here

ОБНОВЛЕНИЕ : 

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>

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Smart-таблица по умолчанию применяет разбиение на страницы классов bootstrap.css

Вот доказательство этому: http://lorenzofox3.github.io/smart-table-website/#section-pagination.

Основная проблема в том, что вы используете последнюю версию начальной загрузки 4.1.0. и smart-таблица генерирует пейджинг с помощью 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>
0 голосов
/ 21 ноября 2018

У меня пока нет 50 представителей, чтобы комментировать ...

Вы пытались открыть консоль (F12) и проверить вкладку стилей, чтобы увидеть, какие стили применяются и из каких таблиц стилей? Это, вероятно, даст вам наибольшее понимание. Вероятно, стили начальной загрузки переопределяют добавленные вами. Если вы хотите, чтобы пользовательские стили переопределяли загрузочные, вам нужно будет добавить свою таблицу стилей после загрузки таблицы стилей начальной загрузки, и она, вероятно, загружается с помощью модуля smart table.

Из-за каскадной природы стилей, если вы добавляете стили к нумерации страниц в своей собственной таблице стилей, а затем загружаете и загружаете и добавляете стили, они переопределят ваши стили.

...