0

This is my pagination

enter image description here

pagination.js

$(document).ready(function() { var totalRows = $('#myTable').find('tbody tr:has(td)').length; var recordPerPage = 10; var totalPages = Math.ceil(totalRows / recordPerPage); var $pages = $('<div id="pages"></div>'); for (i = 0; i < totalPages; i++) { $('<span class="pageNumber">&nbsp;' + (i + 1) + '</span>').appendTo($pages); } $pages.appendTo('#myTable'); $('.pageNumber').hover( function() { $(this).addClass('focus'); }, function() { $(this).removeClass('focus'); } ); $('table').find('tbody tr:has(td)').hide(); var tr = $('table tbody tr:has(td)'); for (var i = 0; i <= recordPerPage - 1; i++) { $(tr[i]).show(); } $('span').click(function(event) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).text() - 1) * recordPerPage; var nEnd = $(this).text() * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } }); });

Table.php

<table id="myTable" class="table table-bordered " width="100%" cellspacing="0"> </table>

Hello Guys, Can anyone help with this problem. I'm doing pagination in may patient table but my pagination is in my picture above. I want my pagination to start to "Previous 1 2 3 Next" but in my pagination is only " 1 2 3". I want to add Previous and Next. Sorry Guys, I'm just a beginner.

Improve this question
2
  • 1
    If u are master in JS, you can explore existing 3rd party JS file and customize it as per your need. Playing around with 3rd party js is risky but you can do it definately. Commented May 15, 2020 at 9:07
  • Why not use datatables.net instead? Commented May 15, 2020 at 9:14

2 Answers 2

Reset to default
1

In my example I'm using a table with just 10 entries and recordPerPage is set to 2 for convenience. If there is no previous or next page, previous and next simply don't work. It could be adjusted to not show previous or next instead but maybe this isn't necessary and you're already content with this solution.

$(document).ready(function() { var totalRows = $('#myTable').find('tbody tr:has(td)').length; var recordPerPage = 2; var totalPages = Math.ceil(totalRows / recordPerPage); var $pages = $('<div id="pages"></div>'); for (i = 0; i < totalPages; i++) { $('<span class="pageNumber">&nbsp;' + (i + 1) + '</span>').appendTo($pages); } var next = $('<span class="next" data-target="2">Next</span>'); next.appendTo($pages); var prev = $('<span class="prev" data-target="0">Previous</span>'); prev.prependTo($pages); $pages.appendTo('#myTable'); $('.pageNumber').hover( function() { $(this).addClass('focus'); }, function() { $(this).removeClass('focus'); } ); $('table').find('tbody tr:has(td)').hide(); var tr = $('table tbody tr:has(td)'); for (var i = 0; i <= recordPerPage - 1; i++) { $(tr[i]).show(); } $('span.pageNumber').click(function(event) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).text() - 1) * recordPerPage; var nEnd = $(this).text() * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(".next").data("target", parseInt($(this).text()) + 1); $(".prev").data("target", parseInt($(this).text()) - 1); }); $('span.next').click(function(event) { if ($(this).data("target") <= $(".pageNumber:last").text()) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).data("target") - 1) * recordPerPage; var nEnd = $(this).data("target") * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(this).data("target", $(this).data("target") + 1); $(".prev").data("target", $(".prev").data("target") + 1); } }); $('span.prev').click(function(event) { if ($(this).data("target") >= $(".pageNumber:first").text()) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).data("target") - 1) * recordPerPage; var nEnd = $(this).data("target") * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(this).data("target", $(this).data("target") - 1); $(".next").data("target", $(".next").data("target") - 1); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

But sir can I ask a question is it okay with you?
@woofMaranon Sure, just ask.
Sir in your code is it possible the pagination will be "Previous 1 2 3 Next"? For example i clicked page 4 the pagination become " Previous 4 5 6 Next" Then if i click Previous it become "Previous 3 4 5 Next" Is it Possible to do?
@woofMaranon It is possible to adjust the code but it's a bit of work involved. But in my example it's not possible to have "Previous 4 5 6 Next" on click of page 4 as there is no page 6. What should be displayed instead? "Previous 4 5 Next" or "Previous 3 4 5 Next"?
Ohh yeah no 6 so the display should be "Previous 3 4 5 Next" Sorry sir i disturb you
|
0

This may not answer your question directly but as your question says you are a beginner with JavaScript. As a beginner I'd always try to use existing plugins / librarys which solve my problems before I attempt solving them by myself.

The easiest solution for your problem would be to use something like Datatables. It offers great support for customizing and also comes with your desired pagination out-of-the-box.

If you need help converting your code to datatables ask a new question.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.