javascript - Something not right with AJAX code -

i have page menu of categories , subcategories of products. categories have class 'category' , subcategories have class 'subcategory'. when either clicked ajax sends category php compile html ajax sends page populate div. part works fine.

there function in code split returned records. there 6 records , page show 2 @ time there 3 pages. correct amount of pages displayed(1 2 3) 6 records displayed on each!

can see problem?

$('a.category, a.subcategory').click(function (e) {     // first stop link go anywhere     e.preventdefault();     // class of link     var linkclass = $(this).attr("class");     //get text of link converting clicked object string     var linktext = new string(this);     // value after last / category id     var categoryvalue = linktext.substring(linktext.lastindexof('/') + 1);     // put post parameters 'params' pass through ajax post request     var params = {};     params[linkclass] = categoryvalue;     // send category id getproductdata.php script using jquery ajax post method     // send along category id     // on success insert returned text chosen div     $.post('../inc/showproducts.php', params, function (data) {         //find total number of records         var totalrecords = $(data).length;         //define how many records shown per page         var pagesize = 2         //work out number of pages needed hold records         var numofpages = math.ceil(totalrecords / pagesize);         //make page links         var i,         pagelinks = '<div class="pagelinks">';         (i = 0; < numofpages; i++) {             pagelinks += '<a href="#" onclick="showproductpage(' + + ');return false;">' + (i + 1) + '<\/a> ';         }         pagelinks += '<\/div>';         //display returned data , page links in chosen div (.showproduct)         $('.showproduct').html(pagelinks + data);         showproductpage(0);     }); }); //function slice records pages function showproductpage(pageno) {     var perpage = 2;     var start = pageno * perpage;     var end = start + perpage;     $('.image').hide().filter(function (index) {         return ((index > (start - 1)) && (index < end));     }).show(); } 

//check out line of code     $('.showproduct').html(pagelinks + data); 

the data var has records in still. have each data[position] loop iterates based on pagesize * pagenum. page 1 like

var iterationsize = pagesize  * pagenum; //(2 * 1 = 2) var i; var j = 0; var pagedata[]; for(i = pagenum - 1; < iterationsize; i++, j++){     pagedata[j] = data[i]; }  $('.showproduct').html(pagelinks + pagedata.join(''));