AJAX-enabled jQuery Pagination Plugin - mricode.pagination

mricode.pagination is a jQuery plugin which helps you generate a pagination component for handling client-side or server-side pagination. Supports both static and AJAX content.

Basic usage:

1. Add references to jQuery library and the jQuery mricode.pagination plugin's JS & CSS files into your html page.

<link href="mricode.pagination.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="mricode.pagination.js"></script>

2. Create a container to place the pagination control.

<div id="pagination-demo" class="m-pagination"></div>

3. Initialize the plugin to generate a default pagination control inside the container you created.

$("#pagination-demo").pagination({
  // options here
});

4. Generate a pagination control that loads data from a remote data source via AJAX request.

$("#pagination-demo").pagination({
  remote: {
    url: 'data.json',
    params: $('form').serializeArray(),
    success: function (data) {
        $("#eventLog").append(' remote callback : ' + JSON.stringify(data) + '<br />');
    }
  }
});

5. All available options with default values.

$("#pagination-demo").pagination({
  pageIndex: 0,
  pageSize: 10,
  total: 0,
  pageBtnCount: 11,
  showFirstLastBtn: true,
  firstBtnText: null,
  lastBtnText: null,
  prevBtnText: "«",
  nextBtnText: "»",
  loadFirstPage: true,
  remote: {
    url: null,
    params: null,
    pageParams: null,
    success: null,
    beforeSend: null,
    complete: null,
    pageIndexName: 'pageIndex',
    pageSizeName: 'pageSize',
    totalName: 'total',
    traditional: false
  },
  pageElementSort: ['$page', '$size', '$jump', '$info'],
  showInfo: false,
  infoFormat: '{start} ~ {end} of {total} entires',
  noInfoText: '0 entires',
  showJump: false,
  jumpBtnText: 'Go',
  showPageSizes: false,
  pageSizeItems: [5, 10, 15, 20],
  debug: false
});

6. API methods.

$("#pagination-demo").pagination('setPageIndex', pageIndex);
$("#pagination-demo").pagination('setPageSize', pageSize);
$("#pagination-demo").pagination('setRemoteUrl', url);
$("#pagination-demo").pagination('setParams', params);
$("#pagination-demo").pagination('destroy');
$("#pagination-demo").pagination('render', [total]);
$("#pagination-demo").pagination('remote');
$("#pagination-demo").pagination('getPageIndex');

7. Events.

$("#pagination-demo").on("pageClicked", function (event, data) {
    // do something
}


$("#pagination-demo").on("jumpClicked", function (event, data) {
    // do something
}


$("#pagination-demo").on("pageSizeChanged", function (event, data) {
    // do something
}

Changelog:

2018-09-19

• Added blur.

2016-07-08

• JS update

2016-06-15

• ajax fix for jQuery 3

2016-05-14

• bugfix

---

This awesome jQuery plugin is developed by mricle. For more Advanced Usages, please check the demo page or visit the official website.