<!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>jQuery Pagination分页插件ajax demo</title>
<link rel="stylesheet" href="lib/pagination.css" />
<style type="text/css">
body{font-size:84%; color:#333333; line-height:1.4;}
a{color:#34538b;}
#Searchresult{width:300px; height:100px; padding:20px; background:#f0f3f9;}
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
//此demo通过Ajax加载分页元素
var initPagination = function() {
var num_entries = $("#hiddenresult div.result").length;
// 创建分页
$("#Pagination").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: pageselectCallback,
items_per_page: 1, //每页显示1项
prev_text: "前一页",
next_text: "后一页"
});
};

function pageselectCallback(page_index, jq){
var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
$("#Searchresult").empty().append(new_content); //装载对应分页的内容
return false;
}
//ajax加载
$("#hiddenresult").load("load.html", null, initPagination);
});
</script>
</head>

<body>
<h1>jQuery Pagination分页插件ajax demo</h1>
<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
<div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>
<div id="hiddenresult" style="display:none;">
<!-- 列表元素 -->
</div>
<p>Copyright &copy; <a href="http://www.zhangxinxu.com/wordpress/">张鑫旭-鑫空间-鑫生活</a></p>
</body>
</html>

纯JS实现动态时间的更多相关文章

  1. 纯JS写动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  2. js页面动态时间展示

    效果图: 具体代码 js代码 <script type="text/javascript"> var t = null; t = setTimeout(time,100 ...

  3. js 实现动态时间

    <span id="timebox"></span>                   //承载时间的span $(function () { var o ...

  4. 纯js遍历json获取值动态为select添加option

    遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...

  5. Js多国时间动态更新

    Js多国时间动态更新 点击下载

  6. 纯JS实现鼠标每隔一段时间才能让页面再次滚动

    这里没有用到浏览器的兼容性写法,只是提供思路(这里使用的是Google浏览器的方法) javascript代码部分: //获取html元素var oHtml =document.documentEle ...

  7. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  8. 纯JS实现前端动态分页码

    思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPa ...

  9. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

随机推荐

  1. JAVA常见算法题(二)

    package com.xiaowu.demo; /** * 判断101-2000之间有多少个素数,并输出所有素数. * 质数(prime number)又称素数,有无限个.质数定义为在大于1的自然数 ...

  2. linux 通过两个网卡，连接不同的不同的网段

    linux数据包转发功能 A:192.168.xxx.xxx   B:172.24.xxx.xxx, 从而实现了A网段和B网段的互通. 原因Linux机器可以通过设置实现数据包的转发功能. #echo ...

  3. 第一章 初识shiro

    shiro学习教程来自开涛大神的博客:http://jinnianshilongnian.iteye.com/blog/2018936 第一章 初识shiro 简单了解shiro主要记住三张图即可. ...

  4. yarn Fairscheduler与Capacityscheduler

    Capacityscheduler Capacityscheduler允许多个组织共享整个集群,每个组织可以获得集群的一部分计算能力.通过为每个组织分配专门的队列,然后再为每个队列分配一定的集群资源, ...

  5. idea 去掉never used 提示

  6. 使用LBS(地理位置)

    一.使用之前的简单封装的OkHttpUtil http://www.cnblogs.com/itfenqing/p/6758909.html 二.关键代码: public class MainActi ...

  7. iOS项目开发实战——使用同步请求获取网页源码

    网络请求一般分为同步请求和异步请求,同步请求假设訪问时间过长,会造成界面卡死状态,用户体验不是非常好.可是请求速度较快的话,也能够考虑使用同步訪问.如今先来学习同步訪问. (1)在viewDidLoa ...

  8. 局部敏感哈希(Locality-Sensitive Hashing, LSH)方法介绍（转）

    局部敏感哈希(Locality-Sensitive Hashing, LSH)方法介绍 本文主要介绍一种用于海量高维数据的近似最近邻快速查找技术——局部敏感哈希(Locality-Sensitive ...

  9. Linux IO模式及 select、poll、epoll详解(转）

    同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...

  10. TCP/IP详解 卷一（第十一章 UDP：用户数据报协议）

    UDP是一个简单的面向数据报的运输层协议. UDP不提供可靠性:它把应用程序传给IP层的数据发送出去,但是并不保证它们能到达目的地. UDP首部的个字段如下图所示