How to search special character in an angular smart table? - GeeksforGeeks

15 Sep, 2020
Introduction on Smart table:
It is an Angularjs module used for display purpose as a table format with a set of features like filtering, sorting, etc., This is very much helpful during report preparation, filtering and searching of data in a quicker manner in angular js. It is lightweight, developer-friendly, robust, modular, and extensible
Approaches:
We can start using smart table by using the below ways
bower install angular-smart-table (or)
npm install angular-smart-table
Once the above scripts are executed, we are set in using angular-smart-table
Syntax:
Add the module angular.module(‘<nameofyourapp>’, [‘smart-table’] to the angular application.Just like following normal html table structure, on the table element, need to  add the “st-table” attribute to inform smart-table about the collection that will display the  data, (i.e., using repeater)For Searching a content in angular-smart-table, we need to use, stSearch directive. It can be a comma-separated list of search items that need to be searchedstDebounceTime attribute (the value is in millisecond) can be used in order to control the searching time. Sometimes useless calls will be made (when especially connected to the server) and in order to overcome, this attribute is needed.During search, the input can be a regular expression pattern. Sometimes, in order to escape regexp specific characters in the input, we need to use stSearchEscape attribute.
Add the module angular.module(‘<nameofyourapp>’, [‘smart-table’] to the angular application.
Just like following normal html table structure, on the table element, need to  add the “st-table” attribute to inform smart-table about the collection that will display the  data, (i.e., using repeater)
For Searching a content in angular-smart-table, we need to use, stSearch directive. It can be a comma-separated list of search items that need to be searched
stDebounceTime attribute (the value is in millisecond) can be used in order to control the searching time. Sometimes useless calls will be made (when especially connected to the server) and in order to overcome, this attribute is needed.
During search, the input can be a regular expression pattern. Sometimes, in order to escape regexp specific characters in the input, we need to use stSearchEscape attribute.
Basic Examples and Explanations:
Let us see the sample code of searching in the smart table along with filtering and pagination is seen in below code
Data is retrieved from “http://coderszine.com/demo/rest-api/v1/employee/read” for our sample
stSafeSrc attribute:
As we have taken data from the restful endpoint (even from a remote database, restful endpoint, ajax call, etc)we need to use this attribute without fail. Moreover smart table creates a copy of the displayed collection and since asynchronous data is involved, this attribute is a must.
Here “employees” retrieved as asynchronously and need to be rendered and it is specified in st-safe-src
sort is applied on all columns and hence st-sort is given for sorting.
pagination is applied to have 5 records per page.
Input :
With the above approaches, let us render the data in a smart table with search, sort, and pagination functionalities
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>
Output:
After Searching a text
Sorting based on Designation
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?