AngularJS

BsTable directive - simple list pagination and size selection

BsTable is an AngularJS directive which adds tfoot tag with pagination and page size selection to your table and watches changes on your collection in ng-repeat attribute.

Working sample

 

For working sample take a look at official minisite http://bs-table.com.

 

 

 

How to use

 

1. Include necessary source files

// add bootstrap theme from http://bootswatch.com
<link type="text/css" href="/bootstrap/bootstrap.min.css" rel="stylesheet" />
// include latest jquery.min.js
<script type="text/javascript" src="/js/jquery.min.js"></script>
// include bs-table.min.js
<script type="text/javascript" src="/js/bs-table.min.js"></script>

 

2. Import module to your application

angular.module("BsTableApplication", ["bsTable"]);

 

3. Add this HTML code to your template

<table class="table table-hover table-bordered" bs-table>
    <thead>
        <tr>
            <th data-ng-click="predicate='FirstName'; reverse=!reverse">First name</th>
            <th data-ng-click="predicate='LastName'; reverse=!reverse">Last name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody> // you can use ng-repeat in tbody as below in tr html tag
        <tr data-ng-repeat="contact in contactList | orderBy:predicate:reverse">
            <td>{{contact.FirstName}}</td>
            <td>{{contact.LastName}}</td>
            <td class="action-column">
                <button type="button" class="btn btn-info btn-sm" data-ng-click="Edit(contact)">Edit</button>
            </td>
        </tr>
    </tbody>
</table>

 

READ ME: It is possible to use ng-repeat attribute in tr or tbody tag.

 

4. Add this JS code to your controller

// model for bs-table
$scope.contactList = [];

// get contact list
$scope.contactList = SomeService.GetAll();

 

5. Additional CSS code (not necessary)

.table th:hover{
    text-decoration: underline;
    cursor: pointer;
}
.table .action-column{
    width: 230px;
}
.table .action-column:hover{
    text-decoration: none;
    cursor: default;
}
.table tfoot .pagination{
    float: right;
    margin: 0;
}
.table tfoot .pagination li{
    cursor: pointer;
}
.table tfoot select{
    width: 90px;
    float: right;
    margin-right: 8px;
}

 

GitHub repository

 

For more info you can visit BsTable repository on the GitHub: https://github.com/janholinka/bs-table.

 

License

 

BsTable is licensed under the MIT license. (http://opensource.org/licenses/MIT)

Share on Twitter or Facebook or Google+

Comments

© 2017 JAN HOLINKA