简易jQuery分页代码.

最新推荐文章于 2024-09-01 14:04:36 发布

简生

最新推荐文章于 2024-09-01 14:04:36 发布

阅读量867

点赞数

分类专栏： JavaScript 文章标签： jquery function border class

本文链接：https://blog.csdn.net/jiancm2001/article/details/6783332

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<meta charset="utf-8" />
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
li {
	display:inline;
}
</style>
</head>
<body>
<table border=1 width="500px">
	<thead>
    	<tr>
        	<td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
	</thead>
	<tbody>
    	<tr>
        	<td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
        	<td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
        	<td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
        	<td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
        	<td>5</td>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
        	<td>6</td>
            <td>6</td>
            <td>6</td>
        </tr>
//...省略n多
    </tbody>
</table>
<div id="page-list">
	<ul style="list-style:none; display:inline;">
    </ul>
</div>
<script>
	$(document).ready(function() {
		var nowpage = 0; //当前显示的页码
		var linenum = 3; //这是表格显示的行数
		var pagenum = $("tbody tr").length / linenum ;  
		pagenum = Math.floor(pagenum); //一共的页数！
		if($("tbody tr").length % 3 != 0) pagenum++;
		
		var pageListUl = $("#page-list ul");
		var tbodyTr = $("tbody tr");
		pageListUl.append(" <li id='back-page'><a href='#'>back</a></li> ");
		for(i = 1; i<=pagenum; i++) {
			pageListUl.append(" <li class='pages'><a href='#'>" + i + "</a></li> ");
		}
		pageListUl.append(" <li id='next-page'><a href='#'>next</a></li> ");
		
		tbodyTr.slice(linenum).hide();
		
		$("#page-list ul li.pages").each(function(index){
			this.onclick = function() {
				tbodyTr.hide();
				tbodyTr.slice(linenum*index, linenum*(index+1)).show();
				nowpage = index;
			}
		});
		
		$("#page-list ul li#back-page").click(function() {
			tbodyTr.hide();
			if(nowpage > 0) nowpage--;
			tbodyTr.slice(linenum*nowpage, linenum*(nowpage+1)).show();
		});
		
		$("#page-list ul li#next-page").click(function() {
			tbodyTr.hide();
			if(nowpage < pagenum-1) nowpage++;
			tbodyTr.slice(linenum*nowpage, linenum*(nowpage+1)).show();
		});
		
	});
</script>
</body>