Can someone help me please? I have little knowledge of JS... I tried this example, that brianpeiris wrote.. It worked nicely, but I need two different pagers in the same page. How can I acplish this?
This code doesn't work, but this is how far I got..
<script type="text/javascript">
var pagination_options = {
num_edge_entries: 1,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:1
}
function pageselectCallback(page_index, jq){
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult').empty().append(new_content);
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult2 div.result2').slice(offset, offset + items_per_page).clone();
$('#Searchresult2').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, pagination_options);
num_entries = $('#hiddenresult2 div.result2').length;
// Create pagination element
$("#Pagination2").pagination(num_entries, pagination_options);
}
$(document).ready(function(){
initPagination();
});
Can someone help me please? I have little knowledge of JS... I tried this example, that brianpeiris wrote.. It worked nicely, but I need two different pagers in the same page. How can I acplish this?
This code doesn't work, but this is how far I got..
<script type="text/javascript">
var pagination_options = {
num_edge_entries: 1,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:1
}
function pageselectCallback(page_index, jq){
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult').empty().append(new_content);
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult2 div.result2').slice(offset, offset + items_per_page).clone();
$('#Searchresult2').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, pagination_options);
num_entries = $('#hiddenresult2 div.result2').length;
// Create pagination element
$("#Pagination2").pagination(num_entries, pagination_options);
}
$(document).ready(function(){
initPagination();
});
try this:
var pagination_options = {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:3
};
var pagination_options2 = {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback2,
items_per_page:3
};
function pageselectCallback(page_index, jq){
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function pageselectCallback2(page_index, jq){
var items_per_page = pagination_options2.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult2 div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult2').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, pagination_options);
num_entries = $('#hiddenresult2 div.result').length;
// Create pagination element
$("#Pagination2").pagination(num_entries, pagination_options2)
}
$(document).ready(function(){
initPagination();
});
https://plnkr.co/edit/XFqbVuIa0Sn4rRvE7d0J?p=preview
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
#footer{
height: 19px;
color: light-green;
color: blueviolet;
background-color: darkcyan;
padding: 16px;
}
.inputboxwidth{
width:16px;
}
#blackColr{
color:black;
}
#alignRight{
text-align: right;
margin-right:36px;
}
td{
border: 0px;
padding: 6px;
width: 10%;
}
</style>
</head>
<body>
<table border="1" padding="36px">
<thead>
<tr>
<td>Sno</td>
<td>Name</td>
<td>RollNO</td>
<td>Class</td>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="footer">
<div id="alignRight">
<input type="text" class="inputboxwidth" id="pageNo" name="pageNo" value=""/>
<span id="blackColr">/</span>
<input type="text" class="inputboxwidth" id="TotalPageno" name="TotalPageno" disabled=disabled value=""/>
</div>
</div>
<script>
$( "input#pageNo" ).change(function() {
//console.log("innnnnnnn")
var pageno=$(this).val();
var isnum = /^\d+$/.test(pageno);
if(pageno>countRecor || !isnum){
$( "input#pageNo" ).val(previousPage);
pageno=previousPage
}
var gotorecor=dispRecor*pageno-5;
var body1=$("tbody");
$("tbody").text("")
var temp=[];
for(i=gotorecor;i<=gotorecor+4;i++){
temp.push(data[i]);
}
makeData(gotorecor,gotorecor+4,temp);
});
function makeData(startingRecordNumber,dispRecor,data){
previousPage=$( "input#pageNo" ).val();
var body=$("tbody");
var count=0;
EndingRecordNumber=dispRecor
$.each(data, function(rowIndex, r) {
count++;
if(count==6){
return false;
}
var row = $("<tr/>");
$.each(r, function(colIndex, c) {
row.append($("<td/>").text(c));
});
body.append(row);
});
}
$(document).ready(function() {
$("#pageNo").val("1");
data = [
["1","New York", "LA", "Seattle"],
["2","Paris", "Milan", "Rome"],
["3","Pittsburg", "Wichita", "Boise"],
["4","New York", "LA", "Seattle"],
["5","New York", "LA", "Seattle"],
["6","New York", "LA", "Seattle"],
["7","New York", "LA", "Seattle"],
["8","New York", "LA", "Seattle"],
["9","New York", "LA", "Seattle"],
["10","New York", "LA", "Seattle"],
["11","New York", "LA", "Seattle"],
["12","New York", "LA", "Seattle"],
["13","New York", "LA", "Seattle"],
["14","New York", "LA", "Seattle"],
["15","New York", "LA", "Seattle"],
["16","New York", "LA", "Seattle"]]
countRecor=Math.ceil(data.length/5);
dispRecor=5;
$("#TotalPageno").val(countRecor);
makeData(0,dispRecor,data);
});
</script>
</body>
</html>