TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Akaash Chintamani Meher
1.4k
320
15.2k
How can I reduce the logic for the below code snippet
Oct 15 2019 1:49 AM
In the below code snippet I wrote the code for the pagination of the grid. Can you please suggest how can I reduce the logic.
<head>
<title>Pagination</title>
<meta charset=
"utf-8"
>
<meta content=
"width=device-width, initial-scale=1"
name=
"viewport"
>
<link href=
"style.css"
rel=
"stylesheet"
type=
"text/css"
>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel=
"stylesheet"
>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
></script>
</head>
<body>
<div
class
=
"container"
>
<h2>Pagination</h2>
<table
class
=
"table table-striped"
>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Image</th>
</tr>
</thead>
<tbody id=
"data"
>
</tbody>
</table>
</div>
<div id=
"page"
>
</div>
<script>
let page = 1;
let per_page = 1;
let user_data;
$(document).ready(
function
(){
getUser(page, per_page)
});
function
getUser(page, per_page) {
$.ajax({
url:
'https://reqres.in/api/users?page='
+page+
'&per_page='
+per_page,
method:
'GET'
,
dataType:
'json'
,
success:
function
(response) {
user_data = response.data;
let code =
''
;
for
(let i = (user_data.length - per_page); i < (user_data.length); i++) {
if
(i < user_data.length)
code +=
'<tr><td>'
+ user_data[i].id +
'</td><td>'
+ user_data[i].first_name + user_data[i].last_name +
'</td><td>'
+ user_data[i].email +
'</td><td><img src="'
+ user_data[i].avatar +
'" height="80px" width = "80px"></td>'
;
}
document.getElementById(
'data'
).innerHTML = code;
document.getElementById(
'page'
).innerHTML =
'<a class="btn" href="javascript:getUser('
+ (response.page - 1) +
', '
+ (response.per_page) +
')" id="prev">Prev</a>'
+
'<span id="page_number"></span>'
+
'<a class="btn" href="javascript:getUser('
+ (response.page + 1) +
', '
+ (response.per_page) +
')" id="next">Next</a>'
;
let prev_btn = document.getElementById(
'prev'
);
let next_btn = document.getElementById(
'next'
);
(response.page <= 1)? prev_btn.className =
'hide_un_hide'
: prev_btn.className =
'btn'
;
(response.page >= response.total_pages)? next_btn.className =
'hide_un_hide'
: next_btn.className =
'btn'
;
display(response);
},
});
}
function
display(data){
let first =
'<a class="btn" href="javascript:getUser('
+ 1 +
', '
+data.per_page+
')">1</a><i>...</i>'
;
let last =
'<i>...</i><a class="btn" href="javascript:getUser('
+ data.total_pages +
', '
+ data.per_page +
')">'
+ data.total_pages +
'</a>'
;
let page_link = document.getElementById(
'page_number'
);
if
(data.total_pages < 6) {
page_link.innerHTML = add(1, data.total_pages, data.page);
}
else
if
(data.total_pages > 5 && data.page < 4) {
page_link.innerHTML = add(1, 4, data.page) + last;
}
else
if
(data.page > 3 && data.page < (data.total_pages - 2)) {
page_link.innerHTML = first + add((data.page - 1), (data.page + 1), data.page) + last;
}
else
{
page_link.innerHTML = first + add((data.total_pages - 3), data.total_pages, data.page);
}
}
function
add(s, f, page){
let code =
''
;
for
(let i = s; i <= f; i++) {
code +=
'<a id = "'
+ (page===i) +
'" class="btn" href="javascript:getUser('
+ i +
','
+ per_page +
')">'
+ i +
'</a>'
;
}
return
code;
}
</script>
</body>
Reply
Answers (
2
)
server timeout not working properly
how to get the object from the window.open in window.opener