Materialize Pagination is a jQuery plugin that provides behaviour and rendering of the Materialize Pagination component.
To get the Materialize Paginaton plugin working you first need to include jQuery, Materlize.css and Materlize icons.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="materialize-pagination.min.js"></script>
Next invoke the function on your pagination container
$('#pagination').materializePagination({
align: 'left',
lastPage: 10,
firstPage: 1,
urlParameter: 'page',
useUrlParameter: true,
onClickCallback: function(requestedPage){
console.log('Requested page is '+ requestedPage);
}
});
| Attribute | Type | Default | Description |
|---|---|---|---|
| align | string | 'center' | Pagination alignment within its parent container. Possible options: center,
left and right
|
| lastPage | int | 1 | Int value of last page |
| firstPage | int | 1 | Int value of first page |
| urlParameter | string | 'page' | The url parameter that indicates which page is currently open e.g. /?page=2
|
| useUrlParameter | boolean | true | If option is set to false, page navigation will not change the url and the correspondigly the urlParameter is ignored
|
| onClickCallback | function | {} | Optional user defined function that is invoked every time a new page is requested i.e clicked. It recives the requestedParameter containing the requested page number
|