使用Jquery做分页效果

之前写过一个PHP 的分页效果,但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页,整理了一下,代码如下: html: <div id="containet"> <ul id="pageMain"> <li>这是内容标题第1</li> <li>这是内容标题第2</li> <li>这是内容标题第3</li> <li>这是内容标题第4</l…

简单的用jQuery做遮罩效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>用jquery做遮罩</title> <style> .all{ width:100%; height:500px; background: red; position: relative; } .mask { width:100%; height:…

通过jq实现分页的原理如下:将所有条数加载到页面中,根据每页放特定条数(例如 5 条)获取jquery对象索引,使部分条数显示,其他条数隐藏. 前提:引入jquery.js 代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .wr…

jQuery伪分页效果

如图,我们首先分析在一个页面存放4条内容,其余的超出隐藏(因为这里没有后台数据,所以我们把内容‘写死’),然后就是下面两个按钮(这里我们不用button,因为button有自带的提交功能),然后我们可以把首页写成1,总页数使用JQ实现,为此,我们先把页面跟样式写好 <div class="main"> <div class="item"> <ul class="clear"> <li>1</l…

SpringMVC -jquery实现分页

效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org.springframework.context.ApplicationContext; import org.springframework.context.support.ClassPathXmlApplicationContext; /** * @author lyx * * 2015-8-18…

jquery动态分页

最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一个<div class="pageDivs"></div> ,这个是用来存放分页的. 然后建一个page.js文件,具体代码如下(js中用到的css类是自己设置的,这里就不给出了,具体的大家可以自己设置一下css样式): $(document).ready(func…

JS实现分页效果

<!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-Typ…

使用jQuery Pagination Plugin实现分页效果

最近使用分页这个基础效果较为频繁,而项目前端页面使用的是纯静态的HTML,自己之前写的JSP中的分页就用不成了:项目中也引入了Bootstrap,本来想使用Bootstrap中的分页样式,但发现其样式与这个项目的风格太不搭,再去修改其样式,还要控制其页码控制首页和末页不能再点击上一页和下一页,再麻烦了,索性就使用这个jQuery的分页插件配合着ajax来实现,使用过后感觉还不错. 使用步骤 1.引入以下的js和css文件 <link rel="stylesheet" href=&…

jquery自定义插件实现分页效果

这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta charset="utf-8"> <title>page t…

分享5种风格的 jQuery 分页效果【附代码】

jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示源码下载各个效果的使用示例代码: $(function() { $("#demo1").paginate({ count : 100, start : 1, display : 8, border : true, border_color : '#fff', text_color : '#fff',…