Loading

Implement Pagination Using Jquery.

Implement Pagination Using Jquery.

Guest User

5y845

How to implement Pagination Using Jquery (Not User DataTable) and I have see this example

$('#pagination-demo').twbsPagination({

totalPages: 16,--Here Set static Page But I want to this is dynamic

visiblePages: 6,

next: 'Next',

prev: 'Prev',

onPageClick: function (event, page) {

//fetch content and render here

$('#page-content').text('Page ' + page) + ' content here';

}

});

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
use preventDefault
onPageClick: function (page, event) {
    event.preventDefault()
  // my function
}
Guest User5y ago
It's working but one issue face.

https://localhost:44368/blog -without click pagination this url render

https://localhost:44368/blog#page-1 -with click paginantion this url render
Sachin Singh5y ago
put the script at the bottom.
Guest User5y ago
I have implement this code for pagination but not working.Please check this

Blog
@foreach (var blogPost in Model.Items)
{

@blogPost.Title

@blogPost.PostDate

@blogPost.ShortDescription

Read more

}

Sachin Singh

Sachin Singh5y ago

twbspagination needs to redraw if you change the total number of pages.

var $pagination = $('#ulId');
var defaultOpts = {
totalPages: 20
};
$pagination.twbsPagination(defaultOpts);
$.ajax({
...,
success: function (data) {
var totalPages = data.length;
var currentPage = $pagination.twbsPagination('getCurrentPage');
$pagination.twbsPagination('destroy');
$pagination.twbsPagination($.extend({}, defaultOpts, {
startPage: currentPage,
totalPages: totalPages
}));
}
});

Thus ajax success call you can data.length