Question posted in
You can find the official documentation here.

How to paginate the JSON data at client side without using Bootstrap? – Jquery ajax

Solution is in this JSFiddle: https://jsfiddle.net/rinku16/mpo7xyjk/17/

When the user click on Filter Search and JSON is downloaded on client side according to the search condition and my pagination JS function partition the rows according to number of rows per page and accordingly make numeral navigation button between previous and next buttons.

I have problem of synchronization of navigation button for pages and previous/Next Button.

My Problem as follows

For example: Initially on search click it displays only table header but if user presses next button it displays (10-19) 10 records continuing (skipped) after 0-9 of previous rows but if user click 0 navigation button (between previous and next buttons) but it displays (0-1-2) 3 rows (but it should display 0-9 rows) and when click on 1 button it should display (10-19) but it displaying (3-4-5).

I have updated the code in this JSFiddle link (https://jsfiddle.net/rinku16/hn3t9gz6/33/) but it is not working properly.

I am trying to build a logic. You can check all logic at the link. I am not able to do following task.

HTML:

<html>

  <head>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


  </head>

  <body>

    <div class="row">
      <div class="col">
        <div>
          Pagination Div
          <div id="pagination"></div>
        </div>
      </div>
    </div>
    <div class="row" style="overflow-x:auto;">
      <div class="col">
        <div>
       Records Div
          <div id="filterRecords"></div>
        </div>
      </div>
    </div>

    </body>
    </html>

Logic for client side:

// This is script to load table based on filter section

$(document).ready(function() {

userDetails = [{
"Lead_Id": "66",
"FirstName": "John",
"LastName": "Doe",
"Company": "Google",
"Website": "www.google.com",
"Designation": "Manager",
"Linkedin": "www.linkedin.com/john-doe",
"Email": "[email protected]",
"Phone": "5125501553",
"State": "Delaware",
"Country": "USA",
"TechArea": "Cloud computing",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-02-03",
"NextContactDate": "2020-02-29",
"LeadDescription": "This is lead description testing",
"OwnerNotes": null,
"SetReminder": "2020-02-29",
"AdminNotes": "This is admin notes testing",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-02-03 16:28:26",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
}, {
"Lead_Id": "67",
"FirstName": "Tohn",
"LastName": "Doe",
"Company": "Microsoft",
"Website": "www.microsoft.com",
"Designation": "Manager",
"Linkedin": "www.linkedin.com/tohn-doe",
"Email": "[email protected]",
"Phone": "123456",
"State": "California",
"Country": "USA",
"TechArea": "Computer Networks",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-07",
"LeadDescription": "This is test lead description",
"OwnerNotes": null,
"SetReminder": "2020-03-11",
"AdminNotes": "This is testing admin notes",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-05 10:47:21",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
}];

//More JSON object you can get on jsfiddle link

$("#filterRecords").empty();

var result = $.parseJSON(userDetails);

//###########################################
// Pagination code start
//###########################################

$("#pagination").attr('style', 'display:block;');

$('#pagination').html('<div class="row"><div class="col"><button class="col PreviousButton" id="PreValue"><i class="ion-skip-backward"></i> Previous</button></div>  <div id="nav-numbers" class="col nav"></div>  <div class="col"><button class="col NextButton" id="nextValue">Next <i class="ion-skip-forward"></i></button></div></div>');

paginate_json_data(result)

$("#filterRecords").html(table);


//###########################################
// Pagination code end
//###########################################

});

function paginate_json_data(userDetails) {

var table = '';

table = $("<table></table>");

table.append('<thead><th>#</th><th>Name</th><th>Company</th><th>Website</th><th>Designation</th><th>Linkedin</th><th>Email</th><th>Phone</th><th>State</th><th>Country</th><th>TechArea</th><th>Firm Type</th><th>Firm Size</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Description</th><th>Owner Notes</th><th>Reminder Date</th><th>Admin Notes</th><th>Lead Status</th><th>Lead Added By</th><th>Lead Added On</th><th>Lead Updated By</th><th>Lead Updated On</th></thead><br>');

table.append('<tbody id="myTable"></tbody>');

userDetails = userDetails

$('#pagination').append('<p1>Total number of rows fetched: ' + userDetails.length + '</p1>');

var max_size = userDetails.length;
var sta = 0;

var elements_per_page = 10;

// var elements_per_page = rows_per_page;

var limit = elements_per_page;

goFun(sta, limit);

function goFun(sta, limit) {

// console.log(sta,limit);            

for (var i = sta; i < limit; i++) {


  var tab = '<tr><td>' + i + "n" + '</td><td>' + "<a target='_blank' href=./lead/index.html?lead_id=" + userDetails[i].Lead_Id + " </a>" + userDetails[i].FirstName + ' ' + userDetails[i].LastName + "n" + '</td><td>' + userDetails[i].Company + "n" + '</td><td>' + userDetails[i].Website + "n" + '</td><td>' + userDetails[i].Designation + "n" + '</td><td>' + userDetails[i].Linkedin + "n" + '</td><td>' + "<a href=mailto:" + userDetails[i].Email + ">" + userDetails[i].Email + "</a>" + "n" + '</td><td>' + userDetails[i].Phone + "n" + '</td><td>' + userDetails[i].State + "n" + '</td><td>' + userDetails[i].Country + "n" + '</td><td>' + userDetails[i].TechArea + "n" + '</td><td>' + userDetails[i].FirmType + "n" + '</td><td>' + userDetails[i].FirmSize + "n" + '</td><td>' + userDetails[i].LastContactDate + "n" + '</td><td>' + userDetails[i].NextContactDate + "n" + '</td><td>' + userDetails[i].LeadDescription + "n" + '</td><td>' + userDetails[i].OwnerNotes + "n" + '</td><td>' + userDetails[i].SetReminder + "n" + '</td><td>' + userDetails[i].AdminNotes + "n" + '</td><td>' + userDetails[i].LeadStatus + "n" + '</td><td>' + "<a target='_blank' href=./account/index.html?user_id=" + userDetails[i].LeadAddedBy + " </a>" + userDetails[i].LeadAddedBy + "n" + '</td><td>' + userDetails[i].LeadAddedOn + "n" + '</td><td>' + userDetails[i].LeadUpdatedBy + "n" + '</td><td>' + userDetails[i].LeadUpdatedOn + "n" + '</td></tr>';

  $('#myTable').append(tab)

}
}

$('#nextValue').click(function() {

var next = limit;
if (max_size >= next) {
  def = limit + elements_per_page;
  limit = def

  $('#myTable').empty();

  if (limit > max_size) {
    def = max_size;
  }
  goFun(next, def);
}
});

$('#PreValue').click(function() {

var pre = limit - (2 * elements_per_page);
if (pre >= 0) {

  limit = limit - elements_per_page;

  $('#myTable').empty();

  goFun(pre, limit);

}
});

var number = Math.round(userDetails.length / elements_per_page);

for (i = 0; i <= number; i++) {

$('.nav').append('<button class="nav-numbers btn" id=' + i + '>' + i + '</button>');

}

$('.nav button').click(function() {
var start = $(this).text();
$('#myTable').empty();

limit = 3 * (parseInt(start) + 1) > max_size ? max_size : 3 * (parseInt(start) + 1)

goFun(start * 3, limit);

});
}

I want to do two things using paginate.

  1. Partition the number of rows example: JSON has 32 rows then rows view per page 10 then i have buttons as 1 (10 row), [2] (10 rows),[3] (10 rows), [4] (2 rows) {I have written code for this in link}

  2. Move the focus from one button to next button on (next button click) 1 -> [2] -> [3] -> [4]) {I have not written code for this as it need CSS changes using button id(1->[2]->[3]->[4])}

The problem is button click previous and next are not synchronized with focused buttons (1->[2]->[3]->[4]).

Screenshot of my work until now.

Output

Please correct my code.

Tags:

2

Answers


  1. 0

    Take a look on that fork (https://jsfiddle.net/Kyrylo/2hbxmove/)

    Instead focus I use button’s disable/enable, but idea the same.

    // keep in scope var current - ref to current page
// on nav btn click, prev, next
// remove disabled attr from current btn
$('#' + current).removeAttr('disabled');

// update current value, line below from onPrevClick handler    
current = Math.max(current - 1 , 0);

// disable new current 
$('#' + current).attr('disabled', 'disabled');
    Login or Signup to reply.
  2. 0

    If understand it right, if you click the button 1,2 or 3 it shows only the next 3 new but should show the next 10 new.
    then change the following:
    change the “3” to “10” in your code

    $('.nav button').click(function() {

var start = $(this).text();

$('#myTable').empty();

limit = 10 * (parseInt(start) + 1) > max_size ? max_size : 10 * (parseInt(start) + 1)

goFun(start * 10, limit);

    });

    EDIT:

    to start directly with result, you can execute the first button like

    $('.nav button')[0].click()

    only put this at the end of your code

    see fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search