2
Answers

How can I reduce the logic for the below code snippet

Akaash Chintamani Meher

Akaash Chintamani Meher
5y
417
1
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.
  1. <head>  
  2. <title>Pagination</title>  
  3. <meta charset="utf-8">  
  4. <meta content="width=device-width, initial-scale=1" name="viewport">  
  5. <link href="style.css" rel="stylesheet" type="text/css">  
  6. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">  
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11. <div class="container">  
  12. <h2>Pagination</h2>  
  13. <table class="table table-striped">  
  14. <thead>  
  15. <tr>  
  16. <th>#</th>  
  17. <th>Name</th>  
  18. <th>Email</th>  
  19. <th>Image</th>  
  20. </tr>  
  21. </thead>  
  22. <tbody id="data">  
  23. </tbody>  
  24. </table>  
  25. </div>  
  26. <div id="page">  
  27. </div>  
  28. <script>  
  29. let page = 1;  
  30. let per_page = 1;  
  31. let user_data;  
  32. $(document).ready(function(){  
  33. getUser(page, per_page)  
  34. });  
  35. function getUser(page, per_page) {  
  36. $.ajax({  
  37. url: 'https://reqres.in/api/users?page='+page+'&per_page='+per_page,  
  38. method: 'GET',  
  39. dataType: 'json',  
  40. success: function (response) {  
  41. user_data = response.data;  
  42. let code = '';  
  43. for (let i = (user_data.length - per_page); i < (user_data.length); i++) {  
  44. if (i < user_data.length)  
  45. code += '<tr><td>' + user_data[i].id + '</td><td>' + user_data[i].first_name + user_data[i].last_name +  
  46. '</td><td>' + user_data[i].email + '</td><td><img src="' + user_data[i].avatar + '" height="80px" width = "80px"></td>';  
  47. }  
  48. document.getElementById('data').innerHTML = code;  
  49. document.getElementById('page').innerHTML = '<a class="btn" href="javascript:getUser(' + (response.page - 1) + ', '+ (response.per_page) +')" id="prev">Prev</a>'  
  50. +'<span id="page_number"></span>'  
  51. +'<a class="btn" href="javascript:getUser(' + (response.page + 1) + ', '+ (response.per_page) +')" id="next">Next</a>';  
  52. let prev_btn = document.getElementById('prev');  
  53. let next_btn = document.getElementById('next');  
  54. (response.page <= 1)? prev_btn.className = 'hide_un_hide' : prev_btn.className = 'btn';  
  55. (response.page >= response.total_pages)? next_btn.className = 'hide_un_hide' : next_btn.className = 'btn';  
  56. display(response);  
  57. },  
  58. });  
  59. }  
  60. function display(data){  
  61. let first = '<a class="btn" href="javascript:getUser(' + 1 + ', '+data.per_page+')">1</a><i>...</i>';  
  62. let last = '<i>...</i><a class="btn" href="javascript:getUser(' + data.total_pages + ', '+ data.per_page +')">' + data.total_pages + '</a>';  
  63. let page_link = document.getElementById('page_number');  
  64. if (data.total_pages < 6) {  
  65. page_link.innerHTML = add(1, data.total_pages, data.page);  
  66. } else if (data.total_pages > 5 && data.page < 4) {  
  67. page_link.innerHTML = add(1, 4, data.page) + last;  
  68. } else if (data.page > 3 && data.page < (data.total_pages - 2)) {  
  69. page_link.innerHTML = first + add((data.page - 1), (data.page + 1), data.page) + last;  
  70. } else{  
  71. page_link.innerHTML = first + add((data.total_pages - 3), data.total_pages, data.page);  
  72. }  
  73. }  
  74. function add(s, f, page){  
  75. let code = '';  
  76. for (let i = s; i <= f; i++) {  
  77. code += '<a id = "' + (page===i) +'" class="btn" href="javascript:getUser(' + i + ','+ per_page +')">' + i + '</a>';  
  78. }  
  79. return code;  
  80. }  
  81. </script>  
  82. </body>
Answers (2)
Next Recommended Forum