hey experts i want to integrate jqpaginations in one of my android phonegap project, using jquery mobile ui on front for it, now the problem i am facing is i am newbie in jquery so i am not able to integrate it, the records i am getting from a json return, i can count records using .length but now i want to divide them let say if they are 20 so there should be 4 pages of having 5 records per page..
http://devlegallogs.logisticslogic.com/AppCode/MyTasks.html
this is the link of my project and fyi, i am not using ul li instead repeating a div for every record.......
please help i had wasted my one day on it.....
EDITED: i had done it to some extent but still there is a problem, when i go forward , it works fine, but when i go back then it shows a record twice, i know its my code issue but how to resolve i am hanged!
this is the code snippet , i am submitting the code that comes in success function:
var dd = data; var ObjUl = $(''); var ObAccord = $('');
$(".pagination").hide();
var recordsPerPage = 5
var totalNumRecords = data.length;
//alert(totalNumRecords);
if (recordsPerPage < totalNumRecords) {
pagination(recordsPerPage, totalNumRecords);
}
//recordsPerPage is the number of items you want to display on each page
//totalNumRecords is the total number of items that you have
function pagination(recordsPerPage, totalNumRecords){
//Show the pagination controls
$(".pagination").show();
//loop through all of the divs and hide them by default.
for (var i=1; i <= totalNumRecords; i++) {
$("#mydiv").find("#set" + i).hide();
}
//then only display the number of divs the user dictated
for (var i = 1; i <= recordsPerPage; i++) {
var dueDate = data[i]['due_date'];
var title = data[i]['title'];
var descr = data[i]['description'];
var recId = data[i]['id'];
var sendcount=i;
var ObjMya = buildAccordianTaskListItem(dueDate, title, descr, recId,sendcount);
ObAccord.append(ObjMya);
$("#mydiv").find("#set" + i).show();
}
//maxPages is the maximum amount of pages needed for pagination. (round up)
var maxPages = Math.ceil(totalNumRecords/recordsPerPage);
$('.pagination').jqPagination({
link_string : '/?page={page_number}',
max_page : maxPages,
paged : function(page) {
//alert(page);
//a new page has been requested
alert('paged');
//loop through all of the divs and hide them all.
for (var i=1; i <= totalNumRecords; i++) {
$("#mydiv").find("#set" + i).hide();
//alert('upper');
}
//Find the range of the records for the page:
var recordsFrom = recordsPerPage * (page-1) + 1;
var recordsTo = recordsPerPage * (page);
//then display only the records on the specified page
for (var i = recordsFrom; i <= recordsTo; i++) {
// alert('lower');
// alert(recordsTo);
var dueDate = data[i]['due_date'];
var title = data[i]['title'];
var descr = data[i]['description'];
var recId = data[i]['id'];
var sendcount=i;
var ObjMya = buildAccordianTaskListItem(dueDate, title, descr, recId,sendcount);
ObAccord.append(ObjMya);
$("#mydiv").find("#set" + i).show();
//var $list = $('#mydiv');
}
// $list.trigger('create');
//$list.listview('refresh');
//scroll to the top of the page if the page is changed
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
}
$('#mydiv').append(ObjUl);
$('#mydiv').append(ObAccord);
$(".myaccClass").click(function (e) {
$('.accorddesc').hide();
$('.ui-icon').attr('class', 'ui-icon-plus ui-icon ui-icon-shadow');
$('.accorddesc', this).toggle('ui-collapsible-content ui-body-a');
$('.ui-icon', this).toggleClass("ui-icon-minus");
});
