jQuery Paging for dynamic php records
Checkout this link for DEMO:
1) After opening of link you will see a button. 'Show Map'. Click on it and a map will be displayed
2) You will see a selectbox with countries names.
3) Just select 'Russia' and you will see List of Projects on right side
4) Click on first project entitled 'Russia Project 1'.
5) A new div will open and in white background it shows the the Project Details
You will see Pagination at bottom with titles 'Next Project' and Previous Project.
How can i implement that paging with jquery. Click on Next Project will show next project and if no project exist then NExt PAge should be disabled.
As country 'RUSSIA' have 2 projects so clicking on next will show Russia Project 2.
Hope you got my point
Thanks
http://science-emporium.com.pk/map-test/test-map.php#1) After opening of link you will see a button. 'Show Map'. Click on it and a map will be displayed
2) You will see a selectbox with countries names.
3) Just select 'Russia' and you will see List of Projects on right side
4) Click on first project entitled 'Russia Project 1'.
5) A new div will open and in white background it shows the the Project Details
You will see Pagination at bottom with titles 'Next Project' and Previous Project.
How can i implement that paging with jquery. Click on Next Project will show next project and if no project exist then NExt PAge should be disabled.
As country 'RUSSIA' have 2 projects so clicking on next will show Russia Project 2.
Hope you got my point
Thanks
Scott Fell
You could try and make your own, but there are plug-in's ready to go http://pagination.js.org/ What about just adding a scroll by setting the height and setting overflow to scroll https://www.w3schools.com/cssref/pr_pos_overflow.asp
ASKER
I need some coding example so that I can implement it with PHP. I have visited this site but did not find any example which allows me to implement paging for data coming from Mysql database.
Assume you have a page test.php with a querystring called page so test.php?page=1 and also assume you are showing 10 records at a time. Your SELECT statement will include a LIMIT https://dev.mysql.com/doc/refman/8.0/en/select.html like
SELECT * FROM tbl LIMIT 0,10; # Retrieve rows 6-15SELECT * FROM tbl LIMIT 10,10; # Retrieve rows 6-15<?php
$current_page = $_GET['page']-1;
if ($current_page < 0){// make sure you do not go below zero.
$current_page = 0;
}
$next_page = $current_page +10;
echo "<a href='page=$next_page'>next</a>"ASKER
No I need to use JS paging class not PHP.
If you use js paging, that means you are sending all records to the browser. If you have a hundred or less records, this is fine, but when you get more than that, it can slow down and using a combination of JS/Ajax with php as a processing page is the way to go.
If you look at the link I provided for pagination.js, you can use that with pure JS as the data source. See the example
If you are using tables, look at datatables https://datatables.net/
If you look at the link I provided for pagination.js, you can use that with pure JS as the data source. See the example
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})$data = "1, 2, 3, 4, 5, 6, 7";
dataSource: [<?php echo $data ?>],If you are using tables, look at datatables https://datatables.net/
ASKER
IT not works:
Here is my code:
Here is my code:
<script src="http://maps.google.com/maps?file=api&v=2.x&key=AIzaSyDxexZDrPusqY36snWHfW7gBrzozeNWUYE"type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="map-test1.css" >
<style>
.searchBox{
position: relative;
top: 10px!important;
z-index: 1;
}
</style>
<body onload="initialize()">
<?php
include('db.php');
//$sql = "SELECT id, node_id, latitude, longitude,country FROM map_pin_detail where country<>'' and node_id = $nid ";
$sql = "SELECT id, node_id, latitude, longitude,country FROM map_pin_detail where country<>'' ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
$city_array=array();
$country_name_array=array();
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - latitude: " . $row["latitude"]. " - longitude:" . $row["longitude"]. " -country". $row["country"].'<br/>';
//$country_id=$row["id"];
$country_id=$row["country"];
$nodeid_val=$row["node_id"];
$name=$row["country"];
$status=['code'=>200,'request'=>'geocode'];
$placemark=[
'address'=>$row["country"],
'population'=>'',
'Point'=>['coordinates'=>[$row["longitude"],$row["latitude"],0]]
];
$city_array[]=[
'country_id'=>$country_id,
'nodeid_val'=>$nodeid_val,
'name'=>$name,
'Status'=>$status,
'Placemark'=>$placemark,
];
$country_name_array[]=['name'=>$name];
}
} else {
//echo "0 results";
}
$city_details=json_encode($city_array,true);
mysqli_close($conn);
?>
<button id="showMap">Show Map</button>
<!--Modal Below-->
<div class="modal map-full-section" tabindex="-1" role="dialog" id="popup">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<h5 class="modal-title">Modal title</h5-->
<button type="button" id="map-close-icon" class="close" data-dismiss="modal" aria-label="Close"> <i class="icon-close"></i> </button>
</div>
<div class="modal-body">
<table>
<tr>
<td align="center"><b>Go to:</b>
<!--select onchange="addAddressToMap(this.selectedIndex)"-->
<select class="searchBox" id = "selectbox_map" onchange="if(this.selectedIndex > 0){addAddressToMap(this.selectedIndex - 1);}">
<option value="0">Select Country</option>
<?php
foreach ($country_name_array as $ckey => $cvalue) {
echo '<option>'.$cvalue['name'].'</option>';
}
?>
</select></td>
</tr>
<tr>
<td><div id="map_canvas" class="map" style="width:750px;height:700px"></div>
<!----------------------------------------Map Sidebar Start Here-------------------------------------------->
<!--div class="map-sidebar closed"-->
<div class="map-sidebar ">
<div id="projects-sidebar" class="sidebar no-filter" style="display: block;">
<div class="wide-sidebar">
<h2 class="map-theme-bg-color">Projects <!--in <span class="country-name">Pakistan</span--></h2>
<ul id="project-list">
<!--button class="linkTest">This is Test Link - Static</button>
<button class="linkTest">This is Test Link - Static2</button-->
</ul>
</div>
<div id="filters-bar" class="narrow-sidebar">
<div class="filters-wrapper">
<h2 id="initiatives-title" style="display: none;">Initiatives</h2>
<ul id="initiatives-list">
</ul>
<h2 id="groups-title" style="display: none;">Groups</h2>
<ul id="groups-list">
</ul>
</div>
<div class="bottom-bar reset-filters" style="display: none;"><span>Reset Filters</span></div>
</div>
<!--div class="sidebar-tab map-theme-bg-color" style="background-color: rgb(98, 166, 47); display: block;"-->
<button class="sidebar-tab map-theme-bg-color" style="background-color: rgb(98, 166, 47); display: block;"><img src="/sc-map/sites/default/files/tab-arrow.png" alt="" ></button>
</div>
</div>
</div>
<!------For Content------>
<div id="project-content" class="map-sidebar project-sb" style="display: none;">
<div class="pr-cont-header" style="background-image: url("/Vault/Thumb?VaultID=13439&Mode=R&ResX=450&ResY=180");">
<div class="pr-header-content">
<div class="pr-back">
<span>
<a href="javascript:void(0);" class="ProjList">Back to projects</a>
<svg class="sc-icon sc-icon-arrow-sml">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-sml"></use>
</svg>
</span>
</div>
<div class="pr-name">
<p>Project <span class="project-location-name">Karachi, Pakistan</span></p>
<h2 class="projtitle">Lyari</h2>
<div class="thumb-container">
<span class="thumb thumb-1" style="background-image: url("/Vault/Thumb?VaultID=13150&Mode=R&ResX=20&ResY=20"); display: none;"><span class="tip-balloon">Green</span></span>
<span class="thumb thumb-2" style="background-image: url("/Vault/Thumb?VaultID=13151&Mode=R&ResX=20&ResY=20"); display: none;"><span class="tip-balloon">Healthy</span></span>
<span class="thumb thumb-3" style="background-image: url("/Vault/Thumb?VaultID=13152&Mode=R&ResX=20&ResY=20"); display: inline-block;"><span class="tip-balloon">Inclusive</span></span>
<span class="thumb thumb-4" style="background-image: url("/Vault/Thumb?VaultID=13153&Mode=R&ResX=20&ResY=20"); display: none;"><span class="tip-balloon">Refugees</span></span>
<span class="thumb thumb-5" style="background-image: url("/Vault/Thumb?VaultID=13154&Mode=R&ResX=20&ResY=20"); display: none;"><span class="tip-balloon">Workers</span></span>
<span class="thumb thumb-6" style="background-image: url("/Vault/Thumb?VaultID=13155&Mode=R&ResX=20&ResY=20"); display: inline-block;"><span class="tip-balloon">Youth</span></span>
</div>
</div>
</div>
</div>
<!--div class="pr-cont-content"-->
<input type="hidden" name="rowcount" id="rowcount" />
<div class="pr-cont-image"></div>
<div class="pr-cont-info">
<p>This box must display the content of Selected Project only <br style="mso-special-character:line-break"></p>
<a class="button" href="" target="_blank" style="display: none;"></a>
</div>
<div class="pr-cont-content" id="pagination-result">
<p>This is paging reesult block </p>
</div>
</div>
<!--div id="pagination-result">
<input type="hidden" name="rowcount" id="rowcount" />
</div-->
<div class="bottom-bar pr-cont-nav">
<span class="navigation prev" data-id="5a01c014cfbeb4f1018b4582">Previous Project<svg class="sc-icon sc-icon-arrow-sml">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-sml"></use>
</svg>
</span>
<span class="current">2 / 4</span>
<span id="pgn_next" class="navigation next" data-id="5a01bfefcfbeb409008b4597"><a href='javascript:void(0);'>Next Project</a><svg class="sc-icon sc-icon-arrow-sml">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-sml"></use>
</svg>
</span>
</div>
</div>
<!------END Content------>
</div>
<!----------------------------------------Map Sidebar End Here----------------------------------------------></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery("button.sidebar-tab").click(function(){
jQuery('div.map-sidebar').toggleClass("closed");
});
// Builds an array of geocode responses
var city = <?php echo $city_details; ?>;
function initialize()
{
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.441944, -122.141944), 4);
}
function addAddressToMap(response)
{
jQuery('div.map-sidebar').removeClass("closed"); //open panel on Country selection
map.clearOverlays();
var place = city[response].Placemark;
var point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
map.setCenter(point, 6);
map.openInfoWindowHtml(point, "<b>City:</b> " + place.address);
var country_id=city[response].country_id;
var node_id=city[response].nodeid_val;
projectlist(country_id,node_id);
}
function projectlist(country_id,node_id)
{
jQuery.ajax({
url : "project.php",
type : "POST",
data : {"country_id":country_id,"node_id":node_id},
dataType : "json",
success : function(data) {
jQuery('#project-list').html(data.message1);
//jQuery('.pr-cont-image').html(data.message3);
},
});
}
//jQuery("#mydiv").html("<button id=\"showMap\">Launch Generation Amazing Map</button>");
/*
jQuery("#popup").modal({
show: false,
backdrop: 'static'
});
*/
jQuery('#showMap').on('click',function(){
jQuery('.modal').modal('show');
});
jQuery('#showMap').on('click',function(){
jQuery("select#selectbox_map").prop('selectedIndex', 0);
jQuery('div.map-sidebar').addClass("closed");
jQuery('.modal').modal('show');
});
jQuery(".ProjList").click(function () {
jQuery('#project-content, button.sidebar-tab').toggle();
});
jQuery('body').on('click', 'span.li-txt, span.li-txt2', function() {
var pid = jQuery(this).data('id');
var title = jQuery(this).data('title');
var detail = jQuery(this).data('detail');
var mapimage = jQuery(this).data('mapimage');
jQuery('.projtitle').html(title);
jQuery('.pr-cont-info').html(detail);
jQuery('.pr-cont-image').html('<img src=http://localhost/sc-map/sites/default/files/map/'+mapimage+' width=200px>');
jQuery('#project-content, button.sidebar-tab').toggle();
});
</script>
</body>
Since you want a javascript solution, can you post your rendered html or even better a link to your test page. That will allow us to better help. We can't determine javascript issues with php code.
Thank you.
Thank you.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.