Basic usage

$('.sp-pagination').pagination({
  total_of_records: 60
  records_per_page: 10
})

The above example will result:

Configurations

Below is the list of available options, with them default values.

total_of_records: 60 // attention
records_per_page: 10 // attention
pages_to_display: 'all' // optional
param_name: 'page' // optional
position: 'center' // optional
ajax: false // optional
show_arrows: false // optional
show_info: true // optional
previous_label: 'Previous' // optional
next_label: 'Next' // optional
total_of_records_label: 'Total of records: ', // optional
css_classes: { // optional
  div: 'sp-pagination',
  list: 'sp-pagination-wrapper',
  records_info: 'records-info'
},

You don't need to override any of these options to use the plugin, but if you don't specify the right settings the plugin may doesn't work as expected.
The options commented with 'attention' are those which you maybe need to set if the plugin isn't working properly.

Pages to display

Is the amount of pages that will be displayed, this is useful if you don't wanna show all pages at once.
Can be 'all' or the amount of pages to be displayed. The default value is 'all'.
If we use the below example

$('.sp-pagination').pagination({
  total_of_records: 60 
  records_per_page: 10 
  pages_to_display: 4 
});

The result will be:

Now, if we set pages_to_display to 'all' or a number greater than the pages that can be displayed (in this case, six) we will see:

Position

Note that if you set to display the records info, this will be placed in the same position of pagination itself.
The position of info will be changed in the future and will be more flexible.

Previous and next label

For these options you can pass your own html. Can be useful if you want to add an icon instead of text, as below:

$('.sp-pagination').pagination({
  next_label: '<i class="fa fa-chevron-right"></i>',
  previous_label: '<i class="fa fa-chevron-left"></i>'
})

CSS Classes

After generate the pagination the structure will be:

<div class='sp-pagination'>
  <ul class='sp-pagination-wrapper'>
  <div class='records-info'></div>
</div>

With the css_classes option you can change that.
For now, you can set only classes, if needed this may be changed in the future to permit add both id and classes.

Ajax (not implemented yet)

The use of ajax is showed below.

$('.sp-pagination').pagination({
    ajax: {
      url: '/cities', // required
      table_selector: '.my-table', // required
      method: 'post', // optional
      loader: false, // optional
      extra_data: false // optional
    }
  })

Options

• url: The url to get the data.
• table_selector: The table where the records will be placed.
• method: The method of request, post or get.
• loader: In some cases the request can take some time, if you want to display a loader while the data are loading, set this to true or add your own custom html, as below:

$('.sp-pagination').pagination({
    ajax: {
      loader: '<div class='loader'></div>'
    }
  })

• extra_data: If you want to add more data in each row. In this case, you must pass an array with the extra data, as below:

$('.sp-pagination').pagination({
    ajax: {
      extra_data: [
        '<td>Data 1</td>'
        ,
        '<td>Data 2</td>'
      ]
    }
  })