How can we apply paging in custom table in Service Portal?

[nayanawadhiya1]

Hello,

How can we apply paging of a custom table in Service Portal?

Below is my table script -

<div class="tab-content">

  <table id="myTable" class='table table-condensed table-bordered table-striped' >

      <thead>

          <tr>

            <th> </th>

              <th>Name</th>

              <th>Used For</th>

              <th>State</th>

              <th>vCenter Reference</th>

          </tr>

      </thead>

      <tbody>

          <tr ng-repeat="x in c.data.list">

        <td><input type='checkbox' value='{{x.sys_id}}' id="{{x}}" ng-model="checked1" ng-click="selectedList(x.sys_id)" /></td>

              <td><a href="bechtel_sn?id=vmware_form&view=sp&table={{c.data.table}}&sys_id={{x.sys_id}}">{{ x.name}}</a></td>

              <td>{{ x.used_for}}</td>

              <td>{{ x.state}}</td>

              <td>{{ x.vcenter_ref}}</td>

          </tr>

      </tbody>

  </table>

[Ujjawal Vishnoi]

Hi Nayan,

You can refer the out of the box widget 'Data table form URL definition'. It gives you options for paging.

Hope this helps.

Regards

Ujjawal

[nayanawadhiya1]

Not able to understand.

[nayanawadhiya1 · Accepted solution]

I used paginate Directive of Bootstrap.

Using Widget Dependency in Widget.

For that -

- Included two JS Files dirPagination.js and jquery.min.js   as a UI Script.

- Included that JS files in Widget Dependency.

- Then link that Dependencies with Widget.

Create a widget dependency

Bootstrap Table With Sorting, Searching and Paging using dataTable.js (Responsive) - CodeProject

[Jobi]

Hi Nayan,

Does this solution was implemented in the same way as explained below?

I tried it for doing the same thing in the service portal as part of scoped application development.

For reference, used the same HTML and created two JS added the dependencies into widget.

referred the https://www.codeproject.com/Tips/823490/Bootstrap-Table-With-Sorting-Searching-and-Paging code.

However, the widget gives error as  $(...).dataTable is not a function.

This part of code is not working 

$('#myTable').dataTable();

Can you help here please.