Using array.splice and calculating boundaries javascript json ajax

Question

So, I'm receiving a json file through ajax and showing it in a table. I want to paginate that array. So here's what I'm doing

function Paginator(groups){

   /**
    * This should work.
    * The children() function returns a JQuery object that contains the children.
    * So you just need to check the size and see if it has at least one child.
    * #grouplist > * makes it slightly faster - I think...
    */
   if ( $('#grouplist > *').length > 0 ) {
       $.each($('#grouplist').children(), function(i, current) {
           current.remove();
       });
   }

   //http://davidwalsh.name/javascript-clone-array
   var clone_group = groups.slice(0);
   var page = _globalpage,
   startRec = Math.max(page - 1, 0) * _recPerPage,
   endRec = Math.min(startRec + _recPerPage, clone_group.length)
   recordsToShow = clone_group.splice(startRec, endRec);
   console.log('start '+startRec+' end '+endRec+' page '+ page + ' records to show '+recordsToShow.length);
   // loop through the array to populate your list
   $.each(recordsToShow, function(i, currentGroup){
       console.log('id '+currentGroup.id);
       $('#grouplist').append('<tr> /*html with stuff I need*/ </tr>');
   });
}

Probably not good practice but every variable that starts with underscore '_' is globaly defined. The only one that changes is _globalpage that gets incremented or decremented by 1 everytime you hit "previous" or "next". I'm thinking of changing those to cookies, once I get this to work properly.

This is the result from the console.log

"start 0 end 10 page 1 records to show 10"

"id 1" through "id 10"

after hitting next

"start 10 end 20 page 2 records to show 20"

"id 11" to "id 30"

What's wrong with this? Thanks in advance

This is heavily based on this http://stackoverflow.com/a/2507945 — Thaenor, May 18 '15 at 14:24
Thanks! It's just the way stackoverflow works and it helps people find useful answers. Maybe your question has a better solution than the one you found - someone probably won't put it there because you've written the solution in the very first post. This way, you can accept your own answer but someone else can write a better solution and I can upvote that one (just for example). You see this happen especially when dealing with errors. — jcuenod, May 18 '15 at 15:03
Right. Good point. I would like some optimizations if any. I just realized I could do $('#id').empty instead of iterating through the children and whatnot. Perhaps using jQuery is more efficient? — Thaenor, May 18 '15 at 15:43
`.empty` will almost certainly be faster but try out "jsperf" or ask another question — jcuenod, May 18 '15 at 23:01

score 0 · Answer 1 · answered May 18 '15 at 14:58

Solved. I usually figure this out before I post ... XP I don't even need to clone the array, all I need is to use array.slice instead of array.splice

solution:

var page = _globalpage,
    startRec = Math.max(page - 1, 0) * _recPerPage,
    endRec = Math.min(startRec + _recPerPage, groups.length)
    recordsToShow = groups.slice(startRec, endRec);
$.each(recordsToShow, function(i, currentGroup){ //print stuff

Thanks anyway, the collective spirit of the Internet helped even behind the curtains. :P

Using array.splice and calculating boundaries javascript json ajax

1 Answers1