Dozone of page loading when use page loading script or data load using php and jquery,when lots of data can load its required more and more time but you can divided data into segment then page loading speed is fast and faster that why use data loading script required.
An example of infinite scrolling is your Facebook "News Feed" page. You may notice that when you scroll to the bottom of this page, new content will often load automatically, or you will be given a link to "Older Posts" which will load more content when clicked.
Following advantage of load data into segment :
1-data load fast,
2-no required pagination,
3-loader can show,
4-use windows.scroll function,
which is great but how about loading database records automatically when user scrolls down to the bottom of the page? The technique can be seen in Twitter, Facebook and several other websites.
Demo work as
Demo link :
http://freeteachnology.hol.es/autoScroll/
Code Link :
https://drive.google.com/open?id=0BxmTZPVcu72fWmEwNXRCU1hVd2M
About Ajax :
1-jQuery is a fast and concise JavaScript Library created by John Resig in2006with a nice motto-
2-Write less,do more.
3-jQuery simplifies HTML document traversing,event handling,animating,and Ajax interactions for rapid web development.
Following feature of jQuery:
1-DOM manipulation−The jQuery made it easy to select DOM elements,traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
2-EventHandling:The jQuery offers an elegant way to capture a wide variety of events,such as click,over event,
3-Ajax Support:
jQuery support ajax technology,
4-Lightweight:he jQuery is very lightweight library-about19KB in size (Minified and gzipped ).
5-Animations−The jQuery comes with plenty of built-in animation effects.
6-Cross Browser Support−The jQuery has cross-browser support,and works well in IE and all.
AJAXstands forAsynchronous JavaScript and XML.
AJAX is a new technique for creating better,faster,and more interactive web applications with the help of XML,HTML,CSS,and Java Script
Before you start ajax you will be much and more knowledge about javascript,its important for us.ajax is not difficult it can be easily implementation.
Following advantage of ajax call:
1-Speed,
2-Interaction,
3-XMLHttpRequest,
4-Asynchronous call,
5-Form Validation,
6-Bandwidth Usage,
JavaScript Code:
Load the JS library before writing JavaScript Code.
Create following mysql table :
Code :
-- phpMyAdmin SQL Dump -- version 4.5.2 -- http://www.phpmyadmin.net -- -- Host: localhost -- Generation Time: Apr 14, 2017 at 09:17 AM -- Server version: 10.1.13-MariaDB -- PHP Version: 5.6.20 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; -- -- Database: `test` -- -- -------------------------------------------------------- -- -- Table structure for table `paginate` -- CREATE TABLE `paginate` ( `id` int(11) NOT NULL, `name` varchar(60) NOT NULL, `message` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `paginate` -- INSERT INTO `paginate` (`id`, `name`, `message`) VALUES (1, 'Addison', 'Suspendisse id felis mi. Quisque blandit mattis nisl eu volutpat. Duis viverra lacus quis arcu mattis ac varius ligula convallis. Maecenas magna enim, molestie ac ultrices sed, convallis vel dolor. Vestibulum sed hendrerit massa. Integer consequat odio vitae est rutrum et egestas nibh sodales. Sed adipiscing nisl vel massa bibendum molestie.'), (2, 'Aditya', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel libero ut mi elementum adipiscing ut sed lacus. Nulla eget tempor dolor. Aenean eget metus nisi, sed mattis lectus. Ut vitae pretium dolor. Ut nec dui vitae nisl suscipit volutpat vel eu sapien. Donec suscipit massa ut sapien faucibus pellentesque. Proin eu sapien diam. Nulla facilisi. Etiam adipiscing molestie sapien, sit amet viverra metus hendrerit ut. Vestibulum non laoreet arcu.'), (3, 'Derrick', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend dictum ligula, id vulputate tortor luctus id. Sed accumsan mollis venenatis. Integer auctor ante vitae ante facilisis bibendum. Fusce bibendum enim lacinia mauris pharetra facilisis. Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (4, 'Jefferson', 'Sed faucibus, orci venenatis varius pellentesque, magna massa blandit nisi, id tempus erat tellus pulvinar nibh. Nulla eu rutrum dui. Ut gravida nulla feugiat risus egestas congue. Suspendisse pulvinar ornare urna eleifend tincidunt. Cras eros velit, mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (5, 'Deonte', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend dictum ligula, id vulputate tortor luctus id. Sed accumsan mollis venenatis. Integer auctor ante vitae ante facilisis bibendum. Fusce bibendum enim lacinia mauris pharetra facilisis. Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (6, 'Aden', 'Sed faucibus, orci venenatis varius pellentesque, magna massa blandit nisi, id tempus erat tellus pulvinar nibh. Nulla eu rutrum dui. Ut gravida nulla feugiat risus egestas congue. Suspendisse pulvinar ornare urna eleifend tincidunt. Cras eros velit, mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (7, 'Joey', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend dictum ligula, id vulputate tortor luctus id. Sed accumsan mollis venenatis. Integer auctor ante vitae ante facilisis bibendum. Fusce bibendum enim lacinia mauris pharetra facilisis. Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (8, 'Paul', 'Sed faucibus, orci venenatis varius pellentesque, magna massa blandit nisi, id tempus erat tellus pulvinar nibh. Nulla eu rutrum dui. Ut gravida nulla feugiat risus egestas congue. Suspendisse pulvinar ornare urna eleifend tincidunt. Cras eros velit, mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (9, 'Alex', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend dictum ligula, id vulputate tortor luctus id. Sed accumsan mollis venenatis. Integer auctor ante vitae ante facilisis bibendum. Fusce bibendum enim lacinia mauris pharetra facilisis. Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (10, 'Devante', 'Sed faucibus, orci venenatis varius pellentesque, magna massa blandit nisi, id tempus erat tellus pulvinar nibh. Nulla eu rutrum dui. Ut gravida nulla feugiat risus egestas congue. Suspendisse pulvinar ornare urna eleifend tincidunt. Cras eros velit, mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (11, 'Derrick', 'Duis et gravida lacus. Ut scelerisque ante eu mi tristique dignissim. Maecenas nec augue non dolor tempor viverra eget non felis. Nam posuere laoreet tellus, at commodo massa auctor quis. Maecenas tempus volutpat posuere. Donec in adipiscing libero. Proin viverra, mi blandit scelerisque fringilla, turpis nunc ultrices turpis, vitae malesuada turpis orci non felis. Suspendisse interdum consectetur sem et accumsan. Proin eleifend laoreet ligula, a placerat lorem volutpat ut. Duis sagittis dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fa'), (12, 'Jefferson', 'Etiam ac augue elementum enim ornare molestie. Vestibulum et hendrerit massa. Donec sit amet turpis elit, non pretium risus. Vivamus varius eros sagittis augue posuere pellentesque. Curabitur eu nunc vel erat ultricies eleifend et nec tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices, dolor in congue fermentum, nisi dolor sodales odio, ac sodales est mi vitae leo. mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (13, 'Deonte', 'Morbi ultrices, dolor in congue fermentum, nisi dolor sodales odio, ac sodales est mi vitae leo. Sed suscipit nibh eget tellus tempus gravida sed quis nibh. In euismod porta vehicula. Nulla aliquet, tortor eu tempus aliquet, massa enim placerat enim, et ornare libero ante sed orci. Aenean cursus nulla et lorem bibendum iaculis. Nam lobortis scelerisque vulputate. Sed in leo lorem, eu pharetra lectus. Nunc quis leo dui. Fusce nisi est, hendrerit interdum consequat mollis, vulputate quis est.Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (14, 'Aden', 'enean ut enim ligula, quis rhoncus tellus. Nullam quam tortor, mattis eu cursus nec, placerat a leo. Pellentesque lacinia eros quis justo varius aliquet. Sed quis lacus nec dolor sollicitudin porttitor. Suspendisse elementum, mi ut accumsan eleifend, leo mi auctor tellus, in tristique magna libero at augue. Donec in tellus metus. Curabitur eget metus lorem, at bibendum nisl.Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (15, 'Joey', 'Morbi non nisl sed lorem vehicula lobortis ut vel diam. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra auctor velit, et faucibus ipsum volutpat a. Curabitur est sem, tempus a imperdiet et, convallis id erat. Proin ac nunc nulla. Praesent ac justo eget urna pretium molestie id a lacus. Curabitur a tortor urna, Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (16, 'Oliver', 'Sed faucibus, orci venenatis varius pellentesque, magna massa blandit nisi, id tempus erat tellus pulvinar nibh. Nulla eu rutrum dui. Ut gravida nulla feugiat risus egestas congue. Suspendisse pulvinar ornare urna eleifend tincidunt. Cras eros velit, mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (17, 'Archibald', 'Sed non sapien lacus, non consectetur diam. Vestibulum erat neque, dapibus quis consectetur ut, aliquam et magna. Sed sodales iaculis justo et molestie. Etiam quis odio elementum elit convallis dignissim. Donec semper hendrerit nunc sed luctus. Suspendisse potenti. In placerat urna nulla. Suspendisse potenti. Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (18, 'Derrick', 'Duis et gravida lacus. Ut scelerisque ante eu mi tristique dignissim. Maecenas nec augue non dolor tempor viverra eget non felis. Nam posuere laoreet tellus, at commodo massa auctor quis. Maecenas tempus volutpat posuere. Donec in adipiscing libero. Proin viverra, mi blandit scelerisque fringilla, turpis nunc ultrices turpis, vitae malesuada turpis orci non felis. Suspendisse interdum consectetur sem et accumsan. Proin eleifend laoreet ligula, a placerat lorem volutpat ut. Duis sagittis dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fa'), (19, 'Jefferson', 'Etiam ac augue elementum enim ornare molestie. Vestibulum et hendrerit massa. Donec sit amet turpis elit, non pretium risus. Vivamus varius eros sagittis augue posuere pellentesque. Curabitur eu nunc vel erat ultricies eleifend et nec tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices, dolor in congue fermentum, nisi dolor sodales odio, ac sodales est mi vitae leo. mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (20, 'Deonte', 'Morbi ultrices, dolor in congue fermentum, nisi dolor sodales odio, ac sodales est mi vitae leo. Sed suscipit nibh eget tellus tempus gravida sed quis nibh. In euismod porta vehicula. Nulla aliquet, tortor eu tempus aliquet, massa enim placerat enim, et ornare libero ante sed orci. Aenean cursus nulla et lorem bibendum iaculis. Nam lobortis scelerisque vulputate. Sed in leo lorem, eu pharetra lectus. Nunc quis leo dui. Fusce nisi est, hendrerit interdum consequat mollis, vulputate quis est.Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (21, 'Aden', 'enean ut enim ligula, quis rhoncus tellus. Nullam quam tortor, mattis eu cursus nec, placerat a leo. Pellentesque lacinia eros quis justo varius aliquet. Sed quis lacus nec dolor sollicitudin porttitor. Suspendisse elementum, mi ut accumsan eleifend, leo mi auctor tellus, in tristique magna libero at augue. Donec in tellus metus. Curabitur eget metus lorem, at bibendum nisl.Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (22, 'Joey', 'Morbi non nisl sed lorem vehicula lobortis ut vel diam. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra auctor velit, et faucibus ipsum volutpat a. Curabitur est sem, tempus a imperdiet et, convallis id erat. Proin ac nunc nulla. Praesent ac justo eget urna pretium molestie id a lacus. Curabitur a tortor urna, Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (23, 'Oliver', 'Sed faucibus, orci venenatis varius pellentesque, magna massa blandit nisi, id tempus erat tellus pulvinar nibh. Nulla eu rutrum dui. Ut gravida nulla feugiat risus egestas congue. Suspendisse pulvinar ornare urna eleifend tincidunt. Cras eros velit, mattis at lobortis cursus, pulvinar ut nisl. Ut blandit euismod dolor nec congue. Vestibulum euismod dictum tristique. Morbi sagittis auctor commodo. Pellentesque in odio et nulla tincidunt tristique. In tempor tempus eleifend..'), (24, 'Archibald', 'Sed non sapien lacus, non consectetur diam. Vestibulum erat neque, dapibus quis consectetur ut, aliquam et magna. Sed sodales iaculis justo et molestie. Etiam quis odio elementum elit convallis dignissim. Donec semper hendrerit nunc sed luctus. Suspendisse potenti. In placerat urna nulla. Suspendisse potenti. Morbi semper libero vel justo pellentesque interdum. Curabitur urna ante, dapibus eu pulvinar quis, interdum quis odio.'), (25, 'Chinmay', 'Nunc eget velit tortor, quis tincidunt nibh. Vestibulum eget est elit, a accumsan nunc. Aenean ac tortor justo, at pulvinar quam. Proin in enim quis libero vehicula iaculis sit amet eu ante. Phasellus diam justo, elementum eu rutrum sit amet, molestie vitae magna. Aliquam erat volutpat. Fusce scelerisque libero sit amet erat facilisis pretium.'), (26, 'Addison', 'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In faucibus ligula interdum felis porta in ultrices purus auctor. Curabitur consectetur lacinia metus. Vivamus ultrices, lectus ac pharetra laoreet, tellus quam placerat erat, posuere laoreet diam elit at neque. Aliquam semper scelerisque mollis. Phasellus tempus laoreet molestie.'), (27, 'Aditya', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed tortor sed turpis lobortis vestibulum blandit sit amet arcu. Curabitur tempus pretium faucibus. Phasellus in urna non velit cursus semper eu et dolor. Suspendisse nulla libero, ultricies id lacinia sit amet, sagittis sed neque. Donec volutpat congue velit vel ullamcorper. Quisque quis est leo, in semper nunc. Phasellus gravida placerat risus, nec commodo lectus adipiscing nec.'), (28, 'Derrick', 'Etiam eu tortor eu nibh aliquet feugiat. Integer at dolor nec libero elementum faucibus quis ut ante. Fusce ut orci erat. Nulla facilisi. Aenean est justo, dignissim eu congue sed, tempor egestas orci. Suspendisse porttitor ligula tempus sapien facilisis vel tempus mi fringilla. Donec varius, dui ac semper fermentum, nunc risus interdum nisi, at ultricies dolor purus vel massa.'), (29, 'Jefferson', 'Pellentesque facilisis mattis semper. Donec aliquam, quam non hendrerit pellentesque, urna quam placerat nunc, quis molestie leo risus nec ipsum. Vestibulum ut ligula malesuada justo adipiscing molestie nec in eros. Sed id sapien quis sapien rhoncus sollicitudin. Sed est metus, vehicula ut dictum at, semper eu lacus. Curabitur congue, ante vel commodo laoreet, enim purus venenatis velit, in tincidunt odio ante vitae sem. Sed ut massa et '), (30, 'Deonte', 'purus blandit euismod eu sit amet lorem. Pellentesque tempor, erat quis vehicula vulputate, magna ante elementum tortor, ac feugiat lacus metus vitae ante. Vivamus tellus lorem, porta nec vestibulum ut, mollis sed augue. Sed sed condimentum leo. Curabitur tempor est scelerisque risus pulvinar varius. Mauris eros dui, dignissim at cursus sed, bibendum at elit. Donec gravida ornare sapien vel tempus.'), (31, 'Aden', 'Etiam vulputate nisi in eros consequat non elementum justo consectetur. Etiam quis laoreet ante. Nulla eget nibh arcu. In gravida enim sit amet leo pretium commodo id at eros. Praesent vitae erat neque. Aenean non quam mauris. Etiam ut eros dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'), (32, 'Joey', 'Etiam imperdiet tortor in ipsum posuere eget pharetra velit dapibus. Nullam imperdiet molestie ligula a vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec venenatis ipsum et mi consectetur faucibus. Praesent elementum, mi sit amet sodales tincidunt, mi ipsum cursus lorem, sed feugiat ligula arcu id nibh. '), (33, 'Paul', 'Curabitur venenatis purus lectus. In sed lacus iaculis dolor dignissim gravida congue vitae massa. Phasellus nec tellus in lacus cursus ornare ut quis lectus. Phasellus elementum, mi vel scelerisque varius, neque elit hendrerit elit, eget eleifend elit ipsum in ligula. Morbi in nunc diam, in viverra lectus. Sed interdum est a diam placerat ut sodales neque mollis. '), (34, 'Alex', 'ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In tortor arcu, blandit id elementum et, ultricies in velit. Sed gravida magna a lacus accumsan sollicitudin nec in sem. Nullam tempus felis faucibus odio fringilla dapibus. Ut nec elit eget augue imperdiet pharetra et id quam. Mauris eget mauris est. '), (35, 'Devante', 'Mauris mauris lacus, ultricies quis consectetur id, dictum quis odio. Nunc turpis erat, ultrices et porta eu, adipiscing eget felis. Sed suscipit convallis egestas. Sed id tortor in diam euismod facilisis sed vel libero.'), (36, 'Derrick', 'DLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada quam at enim luctus nec tincidunt odio tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ornare, tellus sed dapibus fermentum, leo mi lobortis nisi, a scelerisque nulla sem vitae ante.'), (37, 'Jefferson', 'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse mollis gravida erat, eget dapibus est cursus at. Sed pulvinar bibendum leo, eget gravida lorem vestibulum pharetra. In hac habitasse platea dictumst. Nam at neque metus.'), (38, 'Deonte', 'Integer a erat sit amet leo rutrum dictum at in sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec vehicula justo. Mauris urna arcu, molestie a cursus at, fringilla non orci. Duis pellentesque porta massa, eu ultricies ipsum pharetra quis. Aliquam at nulla a nunc accumsan congue at et eros. Donec velit orci, tempor eget tempor id, aliquet in nisi.'), (39, 'Aden', 'Phasellus fermentum elementum massa sit amet auctor. Suspendisse nec sapien felis. Ut rhoncus sapien a mauris porta interdum. In hac habitasse platea dictumst. Donec ac diam felis. Proin in dolor sem, ut luctus est. Aenean dictum libero sed tellus molestie eu porta elit porta. Proin mattis imperdiet aliquam.'), (40, 'Joey', 'Duis placerat vulputate sapien ut vehicula. Pellentesque molestie ultricies orci, ac ornare nunc fermentum in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mattis felis non nibh scelerisque vel luctus libero hendrerit. Nam sed nibh sapien. Donec at sapien quis massa luctus pharetra cursus id neque. '), (41, 'Oliver', 'Suspendisse massa mauris, lobortis nec gravida non, lobortis ut risus. Nam ut libero et lorem hendrerit suscipit nec vitae neque. Aenean congue aliquet condimentum. Mauris massa odio, mattis at pellentesque at, fringilla ac sem. Vestibulum scelerisque dui ut eros ultrices non tristique nibh imperdiet. Ut faucibus luctus aliquet.'), (42, 'Archibald', 'Sed ac blandit ligula. Morbi interdum tempus lectus, quis varius ligula facilisis et. Vivamus gravida diam ac enim mattis nec eleifend felis pulvinar. Aenean at velit felis, quis porttitor risus. Proin eros erat, consectetur varius dictum eu, ullamcorper ac tortor. '), (43, 'Derrick', 'Etiam iaculis eros ut quam mattis cursus. Aliquam a nisi sem. Proin sapien mauris, porttitor id pretium ultricies, tincidunt at orci. Quisque adipiscing mi a leo aliquam eu cursus nisi vulputate. Aliquam id porttitor risus. Quisque in tempus est. Praesent eu arcu vitae lorem mollis vehicula facilisis sit amet nulla. Aenean nisl magna, consequat vitae fermentum sed, aliquam ac elit. Cras consectetur eleifend massa. Phasellus porta nibh at ligula sagittis ut ornare elit accumsan. '), (44, 'Jefferson', 'Sed non nisl elit. Cras mollis ligula nec tortor pretium eu luctus dolor mollis. Aliquam erat volutpat. Cras malesuada, nulla sed vulputate accumsan, velit leo sagittis nulla, in commodo enim nisi at diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas dolor'), (45, 'Deonte', 'Sed lorem arcu, auctor vel egestas eu, ultricies vitae felis. Sed massa magna, placerat a blandit vel, suscipit quis urna. Sed malesuada dignissim eros, quis congue urna tempus sit amet. Morbi eu ligula ac leo tincidunt faucibus. Suspendisse vel lobortis diam. Quisque sodales pretium orci, et blandit lectus volutpat et. Curabitur non ipsum ligula, sit amet placerat nisi. Praesent eget tempus orci.'), (46, 'Aden', 'Vivamus a augue sed neque varius lobortis vitae a mauris. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lacinia odio libero, vel bibendum quam. Nunc mattis, orci id dignissim tempor, urna libero feugiat lorem, a dapibus nisi urna vitae libero. Nulla laoreet feugiat rhoncus. Sed tempus magna sed eros pellentesque in dictum erat vestibulum. Aliquam at magna nulla, quis varius ligula. '), (47, 'Joey', 'Proin volutpat congue blandit. Etiam id risus turpis. Ut elit tortor, volutpat semper porttitor ut, adipiscing ut odio. Vivamus quis leo neque, sed pellentesque libero. Etiam sagittis placerat quam vel bibendum. Curabitur quis mollis felis.'), (48, 'Oliver', 'Maecenas nec interdum nibh. Suspendisse facilisis semper tellus sed lacinia. Mauris tristique nulla non massa congue pretium. Donec vel sem a massa ultrices fermentum quis et neque. Pellentesque auctor auctor imperdiet. '), (49, 'Archibald', 'Morbi elementum sem commodo massa ultrices convallis. Aenean condimentum iaculis leo at tristique. Nunc vel nisi at felis semper eleifend. Nam eleifend, sem ac vehicula pellentesque, massa elit ultrices dolor, sit amet interdum neque felis rutrum augue.'), (50, 'Chinmay', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam metus mauris, vehicula sed ultricies vel, fermentum a purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et justo et mauris tincidunt elementum at at dui. Phasellus vitae ipsum lorem, non interdum ante. Q'); -- -- Indexes for dumped tables -- -- -- Indexes for table `paginate` -- ALTER TABLE `paginate` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `paginate` -- ALTER TABLE `paginate` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=51;
if you want create demo of page loading functionality then you cna implement or follow the following steps :
1-header.php,
2-footer.php,
3-connection.php,
4-index.php,
1-header.php :
create header file .php file and include boostrap link and js link :
Code :
<?php
/*
*include connection file and fetach if you want record::-
*/
include('connection.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Free Teachnology | Show Data on Page Scroll using jQuery Ajax PHP from MySQL Database</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<link href="validation/error.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- start:header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid" id="freeteachnology">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Free Teachnology</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only"></span></a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
2-connection.php :
connection file show database connection and php if connection is create then featch data otherwise throw error.
Code :
<?php
/*
* Start:: Database connection::-
*/
$db_username = 'root';
$db_password = '';
$db_name = 'test';
$db_host = 'localhost';
$item_per_page = 5;
$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
//Output any connection error
if ($mysqli->connect_error) {
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
/*
* End:: Database connection::-
*/
?>
3-fetch_data.php:
featch data files includes fetch only data form pagination table, include connection.php files and
check ajax request and prepare select statement bind parameter and execute, after exceute bind result and result fetch using while loop execute.
Code :
<?php
include("connection.php");
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$position = (($page_number-1) * $item_per_page);
$results = $mysqli->prepare("SELECT id, name, message FROM paginate ORDER BY id DESC LIMIT ?, ?");
$results->bind_param("dd", $position, $item_per_page);
$results->execute();
$results->bind_result($id, $name, $message);
while($results->fetch()){
echo ' <div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="well well-sm">
<div class="row">
'.$id.') <div class="col-sm-8 col-md-8">'.$name.'</div> : '.$message.'/div>
</div>
</div> <div class="clearfix"></div>';
}
?>
4-index.php :
index.php files include header.php and footer.php loader file include if page content are not load as soon as possible. Index.php file code not very vast it is very,please refer following code :
when index.php file load at that time show page content as follow :
<?php include('header.php'); ?>
<body>
<div>
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
<strong>Hi..</strong> Show Data on Page Scroll using jQuery Ajax PHP from MySQL Database
</div>
<div class="alert alert-warning">
<a href="https://drive.google.com/open?id=0BxmTZPVcu72fWHVLNF9odVZMWmc" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
<strong> Code download link-</strong>
</div>
<br><br>
</div>
<div class="container">
<div class="row">
<div id="results"></div>
</div>
<div class="clearfix"></div>
<div class="loading-info">
<img src="ajax-loader.gif" />
</div>
<?php include('footer.php'); ?>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
var track_page = 1;
var loading = false;
load_contents(track_page);
//
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
track_page++;
load_contents(track_page);
}
});
//Ajax load function
function load_contents(track_page){
if(loading == false){
loading = true;
$('.loading-info').show();
$.post( 'fetch_data.php', {'page': track_page}, function(data){
loading = false;
if(data.trim().length == 0){
$('.loading-info').html("No more records!");
return;
}
$('.loading-info').hide();
$("#results").append(data);
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
})
}
}
</script>
above code java script function call when scroll on windows first calculate windows height and windos scroll event.
following function call when scroll event call.
Code :
<?php
function load_contents(track_page){
if(loading == false){
loading = true;
$('.loading-info').show();
$.post( 'fetch_data.php', {'page': track_page}, function(data){
loading = false;
if(data.trim().length == 0){
$('.loading-info').html("No more records!");
return;
}
$('.loading-info').hide();
$("#results").append(data);
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
})
}
}
?>
i hope that my code is understand very well and enjoy. please share comment,
Thanks,
Disuza Jen.
Comments