{"id":366,"date":"2016-08-19T19:12:19","date_gmt":"2016-08-19T19:12:19","guid":{"rendered":"http:\/\/stackofcodes.in\/?p=208"},"modified":"2016-08-19T19:12:19","modified_gmt":"2016-08-19T19:12:19","slug":"pagination-with-scroll-using-ajax","status":"publish","type":"post","link":"https:\/\/www.chandansharma.co.in\/blog\/pagination-with-scroll-using-ajax\/","title":{"rendered":"pagination with scroll using ajax"},"content":{"rendered":"
HTML PAGE IS HERE: IN CODEIGNITER::\n<\/strong><\/span>\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Show More Testing<\/title>\n\n <style type=\"text\/css\">\n\n ::selection{ background-color: #E13300; color: white; }\n ::moz-selection{ background-color: #E13300; color: white; }\n ::webkit-selection{ background-color: #E13300; color: white; }\n\n body {\n background-color: #fff;\n margin: 40px;\n font: 13px\/20px normal Helvetica, Arial, sans-serif;\n color: #4F5155;\n }\n\n a {\n color: #003399;\n background-color: transparent;\n font-weight: normal;\n }\n\n h1 {\n color: #444;\n background-color: transparent;\n border-bottom: 1px solid #D0D0D0;\n font-size: 19px;\n font-weight: normal;\n margin: 0 0 14px 0;\n padding: 14px 15px 10px 15px;\n }\n\n code {\n font-family: Consolas, Monaco, Courier New, Courier, monospace;\n font-size: 12px;\n background-color: #f9f9f9;\n border: 1px solid #D0D0D0;\n color: #002166;\n display: block;\n margin: 14px 0 14px 0;\n padding: 12px 10px 12px 10px;\n }\n\n #body{\n margin: 0 15px 0 15px;\n }\n\n p.footer{\n text-align: right;\n font-size: 11px;\n border-top: 1px solid #D0D0D0;\n line-height: 32px;\n padding: 0 10px 0 10px;\n margin: 20px 0 0 0;\n }\n\n #container{\n margin: 10px;\n border: 1px solid #D0D0D0;\n -webkit-box-shadow: 0 0 8px #D0D0D0;\n }\n \n .PROROW_CONTNR\n {\n border: 1px solid grey;\n margin-bottom: 6px;\n padding: 6px;\n box-sizing: border-box;\n background: white;\n }\n .span_SP12\n {\n border: 1px solid lightgrey;\n padding: 3px;\n margin-right: 10px; \n }\n .PRO_FLEX1\n {\n background: #d3d3d3;\n padding: 5px;\n }\n .PRO_SHWNGMSG2\n {\n padding: 5px;\n text-align: center;\n\n }\n .SHWMORE_BTN\n {\n border: 1px solid grey;\n margin-bottom: 6px;\n padding: 6px;\n box-sizing: border-box;\n background: lightblue;\n width: 50%;\n margin-left: 25%;\n text-align: center;\n }\n ._SP12_MR11\n {\n font-size: 19px;\n cursor: pointer;\n padding: 5px;\n }\n <\/style>\n <script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.10.2.js\"><\/script>\n <\/head>\n <body>\n \n <script> \n    var GLOBAL_SXMR_XSNDRQST = true; \n    $(document).ready(function() \n    { \n       busy = false;\n \n       $(window).scroll(function() \n       {\n          if(GLOBAL_SXMR_XSNDRQST === true)\n          {\n             if ($(window).scrollTop() + $(window).height() >                    $(\"#PRO_MAIN_CONTER\").height() && !busy ) \n {\n    busy = true;\n    getscrld_prdctnow();\n }\n }\n });\n \n \n });\n \n \n var GLOBAL_SXMR_XPRODID = 0;\n var GLOBAL_SXMR_XLASTCNT = 0;\n var GLOBAL_SXMR_XTOTPROD = 0;\n function getscrld_prdctnow()\n {\n \n $.ajax({\n url:'http:\/\/localhost\/sharma\/showmorescroll\/scroll-getmoredata',\n type: 'POST',\n data:{'LID':GLOBAL_SXMR_XPRODID,'LCNT':GLOBAL_SXMR_XLASTCNT,'TPROD':GLOBAL_SXMR_XTOTPROD},\n success:function(html){\n \/\/alert (data);\n $(\"._XzscrlMr_PDZ99\").remove();\n $(\"#PRO_MAIN_CONTER\").append(html);\n busy = false;\n window.busy = false;\n },\n error: function () {\n \/\/alert('Some error');\n }\n });\n }\n <\/script>\n \n <div id=\"container\">\n <h1 style=\"text-align:center; \">TESTING<\/h1>\n <div id=\"body\">\n <div class=\"PRO_MAIN_CONTER\" id=\"PRO_MAIN_CONTER\">\n \n <div class=\"PRO_FLEX1\" id=\"PRO_FLEX1\">\n <?php\n $SHMOR_COUNT = 1;\n $SHMOR_TMP_UPTO_ROW = 0;\n $SHMOR_LAST_PROD_ID = 0;\n if($FOUND)\n {\n foreach($PRODUCTS as $DBPRO)\n {\n $product_id = $DBPRO['product_id'];\n $product_title = $DBPRO['product_title'];\n $product_price = $DBPRO['product_price'];\n $product_slug = $DBPRO['product_slug'];\n $SHMOR_LAST_PROD_ID = $product_id;\n $SHMOR_COUNT++;\n ?>\n <div class=\"PROROW_CONTNR\">\n <span class=\"span_SP12\"> SL NO: <?php echo $product_id;?><\/span>\n <span><?php echo $product_slug;?><\/span>\n <\/div>\n\n <?php\n }\n $SHMOR_TMP_UPTO_ROW = $SHMOR_COUNT-1;\n }\n ?>\n \n <\/div>\n <div class=\"PRO_SHWNGMSG2 \">Showing Products Upto <?php echo $SHMOR_TMP_UPTO_ROW;?> in <?php echo $TOTAL_PRODUCTS;?><\/div> \n <input type=\"hidden\" name=\"\" class=\"_XzscrlMr_PDZ99\" id=\"MOREAFTR-<?php echo $SHMOR_LAST_PROD_ID;?>\" data-moreaftr=\"<?php echo $SHMOR_LAST_PROD_ID;?>\" data-lstcnt=\"<?php echo $SHMOR_COUNT;?>\" >\n\n <script>\n var GLOBAL_SXMR_XTOTPROD = <?php echo $TOTAL_PRODUCTS;?>;\n var GLOBAL_SXMR_XPRODID = <?php echo $SHMOR_LAST_PROD_ID;?>;\n var GLOBAL_SXMR_XLASTCNT = <?php echo $SHMOR_COUNT;?>;\n var GLOBAL_SXMR_XSNDRQST = true;\n <\/script>\n <\/div>\n <\/div>\n\n <\/div>\n <\/body>\n<\/html><\/pre>\n
In the Controller:\n<\/strong><\/span><?PHP\n\nclass Scrollmore extends CI_Controller \n{ \n public function index()\n {\n $this->db->select(\"*\");\n $this->db->from(\"td_product\");\n $this->db->order_by('product_id', 'ASC');\n $this->db->limit(15); \n $SHR14_GETPRO_QU = $this->db->get();\n $SHR14_GETPRO_RES_ROW = $SHR14_GETPRO_QU->num_rows();\n $SHR14_GETPRO_RES = $SHR14_GETPRO_QU->result_array();\n\n \n \/\/ USED TO GET TOTAL PRODUCTS \n $this->db->select(\"*\");\n $this->db->from(\"td_product\");\n $this->db->order_by('product_id', 'ASC'); \n $SHR15_GETPRO_QU = $this->db->get();\n $SHR15_GETPRO_RES_ROW = $SHR15_GETPRO_QU->num_rows();\n \n \n $PASSING_ARR = array();\n $PASSING_ARR['TOTAL_PRODUCTS'] = $SHR15_GETPRO_RES_ROW;\n \n $PASSING_ARR['FOUND'] = $SHR14_GETPRO_RES_ROW;\n \n $PASSING_ARR['PRODUCTS'] = $SHR14_GETPRO_RES;\n $this->load->view('scrollmore_main',$PASSING_ARR);\n }\n \n public function getby_scrollmore()\n {\n $GOT_LAST_PID = $_POST['LID'];\n $GOT_LAST_ROW = $_POST['LCNT'];\n $GOT_TOTAL_PROD = $_POST['TPROD'];\n $GOT_LAST_ROWPLUS = $GOT_LAST_ROW;\n \n $this->db->select(\"*\");\n $this->db->from(\"td_product\");\n $this->db->where(\"product_id > $GOT_LAST_PID\");\n $this->db->order_by('product_id', 'ASC');\n $this->db->limit(10);\n $SHR14_GETPRO_QU = $this->db->get();\n $SHR14_GETPRO_RES_ROW = $SHR14_GETPRO_QU->num_rows();\n $SHR14_GETPRO_RES = $SHR14_GETPRO_QU->result_array();\n \n $SHMOR_COUNT = $GOT_LAST_ROW;\n $GOT_UPTO_ROW = 0;\n $SHMOR_LAST_PROD_ID = 0;\n if($SHR14_GETPRO_RES_ROW)\n {\n ?>\n <div class=\"PRO_FLEX1\">\n <?php\n\n foreach($SHR14_GETPRO_RES as $DBPRO)\n {\n $product_id = $DBPRO['product_id'];\n $product_title = $DBPRO['product_title'];\n $product_price = $DBPRO['product_price'];\n $product_slug = $DBPRO['product_slug'];\n $SHMOR_LAST_PROD_ID = $product_id;\n $SHMOR_COUNT++;\n ?>\n <div class=\"PROROW_CONTNR\">\n <span class=\"span_SP12\"> SL NO: <?php echo $product_id;?><\/span>\n <span><?php echo $product_slug;?><\/span>\n <\/div>\n\n <?php\n }\n $GOT_UPTO_ROW = $SHMOR_COUNT-1;\n ?>\n\n <\/div>\n <div class=\"PRO_SHWNGMSG2\">Showing Products From <?php echo $GOT_LAST_ROWPLUS; ?> Upto <?php echo $GOT_UPTO_ROW;?> in <?php echo $GOT_TOTAL_PROD;?><\/div> \n <input type=\"hidden\" name=\"\" class=\"_XzscrlMr_PDZ99\" id=\"MOREAFTR-<?php echo $SHMOR_LAST_PROD_ID;?>\" data-moreaftr=\"<?php echo $SHMOR_LAST_PROD_ID;?>\" data-lstcnt=\"<?php echo $SHMOR_COUNT;?>\" >\n <script> \n var GLOBAL_SXMR_XTOTPROD = <?php echo $GOT_TOTAL_PROD;?>;\n var GLOBAL_SXMR_XPRODID = <?php echo $SHMOR_LAST_PROD_ID;?>;\n var GLOBAL_SXMR_XLASTCNT = <?php echo $SHMOR_COUNT;?>;\n var GLOBAL_SXMR_XSNDRQST = true;\n <\/script>\n <?php\n }\n else\n {\n ?>\n <div class=\"PRO_SHWNGMSG2\">Currently No More Products<\/div>\n <script> \n var GLOBAL_SXMR_XSNDRQST = false;\n <\/script> \n \n <?php \n }\n }\n}\n?>\n\nROUTES:\n$route['default_controller'] = \"scrollmore\";\n$route['scroll-getmoredata'] = \"scrollmore\/getby_scrollmore\";<\/pre>\n","protected":false},"excerpt":{"rendered":"
HTML PAGE IS HERE: IN CODEIGNITER:: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Show More Testing<\/title> <style type=”text\/css”> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ … <\/p>\n
<\/path><\/svg><\/span><\/a><\/path><\/svg><\/span><\/a><\/path><\/svg><\/span><\/a>