列表页通过ajax实现无限加载
来源:互联网 发布:iphone吉他软件删除 编辑:程序博客网 时间:2024/05/16 09:18
前台js代码,使用前需要引用jq。前台布局代码及样式代码这里就不在这里写了,这里主要记录js代码及后台处理代码
前台代码
$(function(){var i=0;$('.industry_type').click(function(){//案例分类条件:行业类型$('.industry_type').removeClass("current");$(this).addClass("current");//当前选项高亮$(".action").html("");//移除原有内容i = 0;loadMeinv();//加载新内容});$('.site_type').click(function(){//案例分类条件:网站类型$('.site_type').removeClass("current");$(this).addClass("current");$(".action").html("");i = 0;loadMeinv();});//url data function dataTypefunction loadMeinv(){i++;var id=16;var it = $('.industry_type.current').attr('value');var st = $('.site_type.current').attr('value');/** $.get(路径,参数,返回值处理,返回数据类型);* * m = content 为模型/模块名称 位于phpcms/modules/content*c = index 为控制器名称 位于phpcms/modules/content/index.php*a = lists 为时间名称 位于phpcms/modules/content/index.php 中lists()方法*json 返回数据必须是json格式的数据,注意json是object类型的**/$.get('index.php?m=content&c=index&a=lists',{show:'ok',catid:id,page:i,industry_type:it,site_type:st},function(data){var html = "";console.log(data);for(var r in data){//通过 for in 遍历对象,for循环是遍历数组,跟 for in 是有差别的//console.log(r);html = '<li><a href="'+data[r]['url']+'" ><img src ="'+ data[r]['thumb'] +' " width="270" height="'+data[r]['img_height']+'" >'+data[r]['title']+'</a></li>';getMinUl().append(html);}},'json');}loadMeinv();$(window).scroll(function(){// 当滚动到最底部以上100像素时, 加载新内容if ($(document).height() - $(this).scrollTop() - $(this).height()<200) loadMeinv();});/**/$('.more').on('click',function(){loadMeinv();});function getMinUl(){//每次获取最短的ul,将图片放到其后var $arrUl = $(".action");var $minUl =$arrUl.eq(0);$arrUl.each(function(index,elem){if($(elem).height()<$minUl.height()){$minUl = $(elem);}});return $minUl;}})
后台处理代码
<?php/***新增初始化模型函数 set_modelid 如果该函数在模型文件中有的话就不用增加了 * 初始化模型 * @param $catid */public function set_modelid($catid) {static $CATS;$siteids = getcache('category_content','commons');if(!$siteids[$catid]) return false;$siteid = $siteids[$catid];if ($CATS[$siteid]) {$this->category = $CATS[$siteid];} else {$CATS[$siteid] = $this->category = getcache('category_content_'.$siteid,'commons');}if($this->category[$catid]['type']!=0) return false;$this->modelid = $this->category[$catid]['modelid'];$this->db->set_model($this->modelid);$this->tablename = $this->db->table_name;if(empty($this->category)) {return false;} else {return true;}}public function lists() {/*接受参数*/$catid = $_GET['catid'] = intval($_GET['catid']);$show = $_GET['show'];$industry_type = $_GET['industry_type']= intval($_GET['industry_type']);$site_type = $_GET['site_type']= intval($_GET['site_type']);$page = $_GET['page']?$_GET['page']:1;......if($type==0) {....../*include template('content',$template); 引入模版时加入判断 */if($show=='ok'){if(!$this->set_modelid($catid)) return false;//初始化模型,获取表名等信息if($this->category[$catid]['child']) {$catids_str = $this->category[$catid]['arrchildid'];$pos = strpos($catids_str,',')+1;$catids_str = substr($catids_str, $pos);$sql = "status=99 AND catid IN ($catids_str)";} else {$sql = "status=99 AND catid='$catid'";}/*方便数据判断,参数字段添加时要设置为主表字段*/if($industry_type !==0){$sql .=" and industry_type=".$industry_type;}if($site_type !==0){$sql .=" and site_type=".$site_type;}$limitStart=5*($page-1);//开始条数//$this->db->select(条件,字段,$limit=‘开始条数,加载多少条’,排序方式,分组方式,返回数组按键名排序)$return = $this->db->select($sql, '*', $limit=$limitStart.',5', 'id', '', 'id');/*如果需要的话调用附表数据 start*/$ids = array();foreach ($return as $v) {if (isset($v['id']) && !empty($v['id'])) {$ids[] = $v['id'];} else {continue;}}if (!empty($ids)) {$this->db->table_name = $this->db->table_name.'_data';$ids = implode('\',\'', $ids);$sql = "`id` IN ('$ids') ";$r = $this->db->select($sql, '*', '', '', '', 'id');if (!empty($r)) {foreach ($r as $k=>$v) {if (isset($return[$k])) $return[$k] = array_merge($v, $return[$k]);}}}/*如果需要的话调用附表数据 end*/echo json_encode($return);//返回数据转换为json格式}else{include template('content',$template);}......}}?>
0 0
- 列表页通过ajax实现无限加载
- Qt之实现列表无限加载
- DEDECMS 列表无限加载
- Qt实现小功能之列表无限加载
- 微信小程序-解析JSON,实现列表无限加载
- (YII)AJAX CTreeView 实现动态加载无限级树
- Echarts通过Ajax实现动态数据加载
- Ajax无限滚动加载数据
- 通过ajax加载外部json文件,并实现加载照片
- Unity3D-UGUI无限滚动加载TableView列表
- web页面通过ajax无限下拉
- BlocksIt.js瀑布流插件结合ajax实现无限加载数据
- 利用ajax实现织梦dedecms瀑布流无限加载功能
- 利用ajax实现织梦dedecms瀑布流无限加载功能
- ViewPager+Fragment实现无限加载
- AngularJs实现无限滚动加载
- c#,jquery easy ui通过ajax实现异步加载tree
- 页面加载后检查用户登录状态,通过ajax实现
- android实现垂直方向跑马灯效果
- ScrollView 嵌套ViewPager viewpager里面不显示 空白
- 配置SharePoint连接SQL Server错误的解决方案
- iOS开发之首次启动引导页的两种处理方法简析
- WIFI DFS测试介绍
- 列表页通过ajax实现无限加载
- python废话:python append的问题
- MFC CEdit获取编辑框内容
- Study Note: RoofLine Model
- 3156: 防御准备|DP|斜率优化
- 扩展Unity3D编辑器的脚本模板
- Android源码之陌陌源码
- oracle中if/else功能的实现的3种写法
- Android 自定义View (一)