1. Главная
  2. Публикации на тему JavaScript
  3. Как использовать AngularJs Smart Table?

Как использовать AngularJs Smart Table?

Что такое Smart Table

Это модуль AngularJs, используемый для целей отображения данных в виде таблицы с набором функций, таких как фильтрация, сортировка и т.д. Это очень полезно при подготовке отчетов, фильтрации и поиске данных. Он легкий, удобный для разработчиков, надежный, модульный и расширяемый.

Установка Smart Table

  • Мы можем начать использовать Smart Table, используя следующие способы
  • bower install angular-smart-table (или)
  • npm установить angular-smart-table
  • После выполнения вышеуказанных сценариев мы настроены на использование angular-smart-table

Синтаксис

  1. Добавьте модуль angular.module ('<nameofyourapp>', ['smart-table'] в приложение angular.
  2. Как и в случае с обычной структурой таблицы html, к элементу таблицы необходимо добавить атрибут st-table, чтобы информировать смарт-таблицу о коллекции, в которой будут отображаться данные (т.е. с помощью ретранслятора).
  3. Для поиска содержимого в angular-smart-table нам нужно использовать директиву stSearch. Это может быть список элементов поиска, разделенных запятыми, в которых необходимо выполнить поиск.
  4. Атрибут stDebounceTime (значение в миллисекундах) может использоваться для управления временем поиска. Иногда будут совершаться бесполезные вызовы (особенно при подключении к серверу), и чтобы их избежать необходим этот атрибут.
  5. Во время поиска ввод может быть шаблоном регулярного выражения. Иногда, чтобы избежать определенных символов регулярного выражения во входных данных, нам нужно использовать атрибут stSearchEscape.

Пример использования

Давайте посмотрим, как пример кода поиска в таблице SmartTable вместе с фильтрацией и разбивкой на страницы показан в приведенном ниже коде.

Данные для нашего образца берутся из http://coderszine.com/demo/rest-api/v1/employee/read.

Атрибут stSafeSrc:

Поскольку мы взяли данные извне (будь то база данных, вызов ajax и т.д.), то нам необходимо обязательно использовать этот атрибут. Более того, таблица SmartTable создает копию отображаемой коллекции, и, поскольку задействованы асинхронные данные, этот атрибут является обязательным.

Здесь employees «сотрудники» извлекаются асинхронно и должны отображаться, и это указано в st-safe-src.

sort применяется ко всем столбцам, поэтому для сортировки предоставляется st-sort.

разбивка на страницы применяется, чтобы иметь 5 записей на странице.

С помощью вышеописанных подходов давайте отобразим данные в таблице с функциями поиска, сортировки и пагинации.

SampleApp = angular.module(
'SampleApp', ['SampleApp.controllers', 'smart-table']);    
  
angular.module('SampleApp.controllers', []).controller(
'sampleController',
['$scope', '$http', function($scope, $http) 
{
    $scope.loading = false;
    $scope.getData = function() {
        $scope.loading = true;
        $http.get(
"http://coderszine.com/demo/rest-api/v1/employee/read")
        .then(function(response){
            $scope.employees = response.data;
            $scope.loading = false;
        });
    }
    $scope.getData();
}]);

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" 
              content="text/html; charset=utf-8" />
        <link rel="stylesheet"
              href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
        <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js">
      </script>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js">
      </script>
        <link rel="stylesheet" 
              href=
"https://fonts.googleapis.com/css?family=Open+Sans" />
        <!-- Indication to know we are
              using smartTableApp.js -->
        <script src="smartTableApp.js">
      </script>
    </head>
    <body>
        <!-- Including our SampleApp and 
             iterate in Angular JS  -->
        <div class="container" 
             ng-app="SampleApp"
             ng-controller="sampleController">
            <h2>Angular Smart Table Example with
              Pagination, Search and Sorting in 
              a simpler way</h2>
            <div ng-show="loading"><h3>Loading the data...</h3>
          </div>
            <table st-table="displayEmployee" 
                   st-safe-src="employees"
                   class="table table-striped">
                <thead>
                    <tr>
                        <th colspan="1">
                            <input st-search placeholder=
                                   "Please provide data to search" 
                                   class="input-sm form-control" 
                                   type="search" />
                        </th>
                    </tr>
                    <tr>
                        <th st-sort="name">Employee Name</th>
                        <th st-sort="gender">Gender</th>
                        <th st-sort="age">Employee Age</th>
                        <th st-sort="skills">Skills</th>
                        <th st-sort="designation">
                          Employee Designation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr st-select-row="row"
                        st-select-mode="multiple" 
                        ng-repeat="employee in displayEmployee">
                        <td>{{employee.name}}</td>
                        <td>{{employee.gender}}</td>
                        <td>{{employee.age}}</td>
                        <td>{{employee.skills}}</td>
                        <td>{{employee.designation}}</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" class="text-center">
                            <div st-pagination="" 
                                 st-items-by-page="5"></div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>