详解ajax +jtemplate实现动态分页

jtemplate是一个基于JQuery的模板引擎插件，功能非常强大，有了她你就再不用为使用JS绑定数据集而发愁了。

主要思路，复制textarea作为模板，ajax加载json数据，添加模板，绑定数据，更新加载更多事件。

//加载更多

function fnLoad(data){
listData.Ajax.data.target_page=parseInt(data.currentPage)+1;
function addmore(){
listData.Ajax.load();
}
//动态变换加载更多标签
if(data.totalNums == 0){
$(“#loadOBj”).addClass(“font-disable”).html(“还没有录入数据！”).unbind(“click”);
}
if(data.hasNext){
$(“#loadOBj”).html(“加载更多”);
if(data.currentPage==1){
$(“#loadOBj”).bind(“click”,addmore);
}
}else{
$(“#loadOBj”).addClass(“font-disable”).html(“已经是最底端了！”).unbind(“click”);
}
}
//Ajaxcallback
function callBackList(data){
var nextHtml = $(‘#listTemplate').prop(“outerHTML”);
var $listObj = listPage==0? ‘#listObj' : ‘#listObj'+listPage;
var $nextListObj = ‘listObj'+(listPage+1);
$($listObj).setTemplateElement(‘listTemplate',null,{filter_data: false});
$($listObj).setParam(“imgDomain”, roomImgDomain);
$($listObj).processTemplate(data);
$($listObj).after($(‘<div></div>',{
id:$nextListObj,
class:'list-wrap'
})
);
$(‘#'+$nextListObj).append(nextHtml);
listPage++;
var $firstH3 = $(“#listObj .view-box:first h3″);
$firstH3.next().show();
$firstH3.find(“span”).addClass(“h3-up”).removeClass(“h3-down”);
fnLoad(data);
}
});
}
//ajax
$Ajax.prototype.load = function(){
var _this = this;
$.ajax({
type: “post”,
url: _this.url,
dataType:'json',
data: _this.data,
success: function(data){
if(_this.callBack){
_this.callBack(data, _this.id);
}else{
//console.log(“ajax未定义回调函数！”);
}
},
error:function(){
//console.log(“ajaxerror”);
}
});
}

//调用

function fnListAjax(){
this.Ajax = new $Ajax();
this.Ajax.url = “”;
this.Ajax.data = {};
}
var listData = new fnListAjax();
fnAjax();
function fnAjax(){
listData.Ajax.url = dataDomain+”/advert/detail.htm”;
listData.Ajax.data = {
code:'index_web'
};
listData.Ajax.callBack = fnCallBackView;
listData.Ajax.load();
};

以上内容给大家分享了ajax +jtemplate实现动态分页，希望大家喜欢。

赞 (0)

相关推荐

  • ajax完美实现两个网页 分页功能的实例代码

    分页的首页 复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf8" /><h1 align="center">武侠小说分页</h><br/><script src="jquery-1.4.2.min.js"></script><script>var

  • php+ajax实现无刷新分页的方法

    本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: 这是一款基于原生态的php +js +ajax 的分页程序实例,我们详细的从数据库创建到js,php,html页面的创建来告诉你如何实现ajax分页调用数据的方法. 具体步骤如下: 一.创建数据库 SQL语句如下: 复制代码 代码如下: CREATE TABLE `tb_user` (   `id` int(10) NOT NULL auto_increment,   `username` varcha

  • asp.net使用jquery模板引擎jtemplates呈现表格

    在Asp.net MVC 中,使得我们能够更加自由控制我们所想显示HTML.通常情况下,都要做一下数据列表.那么我们可以手动去拼一个表格出来,但这样有时对于复杂的表格说,那就JS代码比较复杂了.我们可以借助JS下的模板引擎,来实现这一功能.下面要介绍就是JTemplates,它也是基于Jquery的. 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!D

  • 使用PHP+JQuery+Ajax分页的实现

    使用PHP+JQuery+Ajax分页的实现

    为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() {               //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码            $initial = htmlenti

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • JQuery+Ajax无刷新分页的实例代码

    JQuery+Ajax无刷新分页的实例代码

    先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

  • 详解ajax +jtemplate实现动态分页

    jtemplate是一个基于JQuery的模板引擎插件,功能非常强大,有了她你就再不用为使用JS绑定数据集而发愁了. 主要思路,复制textarea作为模板,ajax加载json数据,添加模板,绑定数据,更新加载更多事件. //加载更多 function fnLoad(data){ listData.Ajax.data.target_page=parseInt(data.currentPage)+1; function addmore(){ listData.Ajax.load(); } //动

  • 详解vue修改elementUI的分页组件视图没更新问题

    今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页. 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果,结果发现分页组件视图并没有渲染,还是停留在原本的页码处. 然后想了想,想起了.sync这个语法糖,让数据进行双向绑定. 直接上修改的代码看看 <el-pagination :current-page.sync="currentPage" :page-sizes="[10, 30, 50]&

  • 详解MybatisPlus3.4版本之后分页插件的使用

    目录 一.MybatisPlusInterceptor 二.旧版分页插件配置方法(Mybatis Plus 3.4.0版本之前) 三.新的分页插件配置方法(Mybatis Plus 3.4.0版本及其之后的版本) 四.分页查询的使用方法 一.MybatisPlusInterceptor 从Mybatis Plus 3.4.0版本开始,不再使用旧版本的PaginationInterceptor ,而是使用MybatisPlusInterceptor. MybatisPlusInterceptor是

  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:http://www.jb51.net/article/26903.htm $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data ,

  • 详解Java中两种分页遍历的使用姿势

    在日常开发中,分页遍历迭代的场景可以说非常普遍了,比如扫表,每次捞100条数据,然后遍历这100条数据,依次执行某个业务逻辑:这100条执行完毕之后,再加载下一百条数据,直到扫描完毕 那么要实现上面这种分页迭代遍历的场景,我们可以怎么做呢 本文将介绍两种使用姿势 常规的使用方法 借助Iterator的使用姿势 1. 数据查询模拟 首先mock一个分页获取数据的逻辑,直接随机生成数据,并且控制最多返回三页 public static int cnt = 0; private static List

  • 详解SpringBoot+Mybatis实现动态数据源切换

    业务背景 电商订单项目分正向和逆向两个部分:其中正向数据库记录了订单的基本信息,包括订单基本信息.订单商品信息.优惠卷信息.发票信息.账期信息.结算信息.订单备注信息.收货人信息等:逆向数据库主要包含了商品的退货信息和维修信息.数据量超过500万行就要考虑分库分表和读写分离,那么我们在正向操作和逆向操作的时候,就需要动态的切换到相应的数据库,进行相关的操作. 解决思路 现在项目的结构设计基本上是基于MVC的,那么数据库的操作集中在dao层完成,主要业务逻辑在service层处理,controll

  • 详解Java的Proxy动态代理机制

    详解Java的Proxy动态代理机制

    一.Jvm加载对象 在说Java动态代理之前,还是要说一下Jvm加载对象的过程,这个依旧是理解动态代理的基础性原理: Java类即源代码程序.java类型文件,经过编译器编译之后就被转换成字节代码.class类型文件,类加载器负责读取字节代码,并转换成java.lang.Class对象,描述类在元数据空间的数据结构,类被实例化时,堆中存储实例化的对象信息,并且通过对象类型数据的指针找到类. 过程描述:源码->.java文件->.class文件->Class对象->实例对象 所以通过

  • 详解C语言中动态内存管理及柔性数组的使用

    详解C语言中动态内存管理及柔性数组的使用

    目录 一.malloc 二.free 三.calloc 四.realloc 1.realloc在扩容时的情况 2.realloc也能实现malloc功能 五.使用动态内存的常见错误 1.free空指针 2.对动态开辟的空间越界访问 3.对非动态开辟内容free 4.只free动态开辟空间的一部分 5.对同一块内存多次free 6.动态内存空间忘记释放(内存泄漏) 六.柔性数组 1.柔性数组的概念 2.柔性数组的特点 3.柔性数组的使用场景 4.柔性数组的优点 一.malloc 这个函数向堆区申请

  • 详解ajax的data参数错误导致页面崩溃

    今天准备把选定表格的其中一行的数据通过ajax传给后端,但是网站确崩溃了. 代码如下: $('.icon-edit').click(function (event) { 这是一个按钮 o=$('.icon-edit').index($(this))+1; edit.style.display='block'; //console.log('$(this)',$(this).parent().parent()); let message=$(this).parent().parent(); $("

  • 详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa

随机推荐