How to search special character in an angular smart table?

Last Updated : 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 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

javascript

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:

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>