最简单的分页（使用了分页助手）-姥姥家的程序员

最新推荐文章于 2022-04-01 15:31:24 发布

姥姥家的程序员

最新推荐文章于 2022-04-01 15:31:24 发布

阅读量242

点赞数

分类专栏：分页文章标签：分页 js 分页助手

本文链接：https://blog.csdn.net/qq_29440353/article/details/84841809

版权

分页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

手写无限数据分页js

话不多说，效果图走起。

在这里插入图片描述

分页需要的资源

后台接口： 需要有一个开发功能完毕的接口，在我开发的接口中，为了分页方便，我使用了github的pagehelper。在后台返回的数据中，主要有分页的信息和查询的结果集。
（1）当前页：pageNum
（2）查询的总条数：total
（3）查询总页面：pages
（4）上一页：prePage
（5）下一页：nextPage
（6）查询结果集：list
如果在开发中没有使用pagehelper，则需要自己封装一个分页的类，里面存在相关的分页信息。
前台页面： 我前台页面的数据回显全部是由js控制，页面为users.html，显示用户信息的为showUser.js，分页js为pageWJ.min.js。

代码

1.后台接口：后台接口返回的数据此处不做显示，查询出来的信息是用户的基本信息。接口返回值样式：

{
    "code": "200",
    "message": "success",
    "data": {
        "total": 3,
        "list": [
            {
                "id": 1,
                "username": "admin",
                "password": "3ef7164d1f6167cb9f2658c07d3c2f0a",
                "userGroup": "1",
                "userDesc": null,
                "userCreate": null,
                "createTime": null,
                "updateTime": null,
                "enable": 1,
                "start": 1,
                "PAGE_SIZE": 10,
                "PAGE_NUM": 0
            },
            {
                "id": 32,
                "username": "admin116",
                "password": "52a698d5eaa2ea105acad627d6454fcb",
                "userGroup": null,
                "userDesc": null,
                "userCreate": null,
                "createTime": null,
                "updateTime": null,
                "enable": 1,
                "start": 1,
                "PAGE_SIZE": 10,
                "PAGE_NUM": 0
            },
            {
                "id": 53,
                "username": "admin111",
                "password": "4258eb39b852cc2fa622a00396446440",
                "userGroup": null,
                "userDesc": null,
                "userCreate": null,
                "createTime": null,
                "updateTime": null,
                "enable": 0,
                "start": 1,
                "PAGE_SIZE": 10,
                "PAGE_NUM": 0
            }
        ],
        "pageNum": 1,
        "pageSize": 10,
        "size": 3,
        "startRow": 1,
        "endRow": 3,
        "pages": 1,
        "prePage": 0,
        "nextPage": 0,
        "isFirstPage": true,
        "isLastPage": true,
        "hasPreviousPage": false,
        "hasNextPage": false,
        "navigatePages": 8,
        "navigatepageNums": [
            1
        ],
        "navigateFirstPage": 1,
        "navigateLastPage": 1
    }
}

前台页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>
    <link href="../../pub-ui/css/interface.min.css" rel="stylesheet">
    <link href="../../pub-ui/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../pub-ui/plugins/artDialog/ui-dialog.css" rel="stylesheet">
    <link href="../../pub-ui/css/app.css" rel="stylesheet">
    <!--[if lt IE 9]>
        <script src="../../pub-ui/js/ieonly/html5shiv.js"></script>
        <script src="../../pub-ui/js/ieonly/respond.js"></script>
        <script src="../../pub-ui/js/ieonly/excanvas.js"></script>
    <![endif]-->
</head>
<body class="bg-graywhite font-sm">
    <p f="p" class="mgr-big mgl-big text-muted mgt-big mgb-big" id = "show_count">共搜索到 922 条数据</p>
    <div f="div" class="mgl-big mgr-big mgb-big pdb-lg bg-white pdl-lg pdr-lg with-headbg clearfix">
        <div class="table-wrap">
            <table class="table table-hover border-bottom mgb-0" style="border:none;" f="table" name="table" id="table">
                <thead>
                    <tr f="tr">
                        <th f="th" class="text-center"><input class="js_select" type="checkbox" f="checkbox"></th>
                        <th f="th">ID</th>
                        <th f="th">用户名</th>
                        <th f="th">是否可用</th>
                        <th f="th">密码</th>
                        <th f="th">操作</th>
                    </tr>
                </thead>
                <tbody id="sList">                  
                </tbody>
            </table>
        </div>
		
			
			 <ul class="ui-page pull-right mgt-big" id = "pageList">
			</ul>
         
</div>
    </div>  
</body>
<script src="../../pub-ui/js/jquery-1.11.3.min.js"></script>
<script src="../../pub-ui/js/interface.min.js"></script>
<script src="../../pub-ui/plugins/artDialog/dialog-plus.js"></script>
<script src="../../pub-script/pageWJ/pageWJ.min.js"></script>
<script src="../../pub-script/showUser.js"></script>
</html>

页面操作的js
页面在一加载的时候，通过ajax发送请求到后端，拿到请求的结果，通过拼接页面的方式，把页面渲染，通过使用fenye（）的js方法，传入相关的分页信息。ajax中的信息是我本地其的服务，如果自己需要用的话，需要将ajax中的url进行修改。pageWJ.min.js要引在showUser.js之前。

//页面加载用户信息
$(document).ready(function () {
	var addParam = {};
	$.ajax({
				cache: true,
				type: "POST",
				contentType: "application/json; charset=utf-8",
				url: 'http://127.0.0.1:8089/serviceBP/users',
				data: JSON.stringify(addParam),
				async: false,
				success: function(result) {
				   renderData1(result.data);
				   
				}
          });

});

//页面加载拼接数据
function renderData1(data) {
    var list  = data.list;
    var html = '';
    $("#show_count").html('共有数据：'+data.total+'条');

    for ( var a in list){
        var uid = list[a].id;
        var username = list[a].username||'';
        var password = list[a].password||'';
        var enable = list[a].enable||'';
		html += '<tr f="tr" name="tr" id="tr">';
       
        html += '<td f="td" class="text-center"><input type="checkbox" f="checkbox" class="checkchild" value = "'+uid+'"></td>';
        html += '<td f="td">'+uid+ 	'</td>';
        html += '<td f="td">'+username+ 	'</td>';
		if(enable == 1){
			html += '<td f="td"><i class="effective" f="font-icon"></i></td>';
		}else{
			 html += '<td f="td"><i class="effective no-effective" f="font-icon"></i></td>';
		}
       
        html += '<td f="td">'+password+	'</td>';
		html += '<td f="td" class="text-primary"><a href="javascript:;" onclick="user_show('+ uid +')" f="a" class="mgr-sm text-primary">查看</a>|<a href="javascript:;" onclick="find_user('+ uid +')" f="a" class="mgl-sm text-primary">修改</a></td>'
     
        html += '</tr>';
    }
	

    $("#sList").html(html);
	fenye(data);
}
//用户分页信息
function fenye(data){
	$('#pageList').jqPaginator({
		totalPages: data.pages, //总页数
		visiblePages: 5, //分页显示几条
		currentPage: data.pageNum, //当前页
		first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
		prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
		next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
		last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
		page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
		onPageChange: function (num, type) {
			var uid = $("#userId").val();
			var uname = $("#uName").val();
			var param = {id:uid,username:uname,PAGE_NUM:num};
			if (type == 'change'){
				$.ajax({
					async: false,
					type: "POST",
					contentType: "application/json; charset=utf-8",
                    url: 'http://127.0.0.1:8089/serviceBP/users',
					data: JSON.stringify(param),
					dataType: "json",
					success: function (result) {
						if(result.message == "success"){
							renderData1(result.data);
						} else {
							alert('数据异常');
						}						
					},
					error: function () {
					}
				});
			}

		}
	});
}

源码请到github进行下载：https://github.com/DontGiveUpWJ/paging.git
页面在pages-main-用户csdn.html
如有问题，请留言或者私信，着急的话可以联系QQ:651136439 备注：cdsn分页

姥姥家的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最简单的分页（使用了分页助手）-姥姥家的程序员

手写无限数据分页js话不多说，效果图走起。分页需要的资源代码话不多说，效果图走起。分页需要的资源后台接口：需要有一个开发功能完毕的接口，在我开发的接口中，为了分页方便，我使用了github的pagehelper。在后台返回的数据中，主要有分页的信息和查询的结果集。（1）当前页：pageNum（2）查询的总条数：total（3）查询总页面：pages（4）上一页：prePage...
复制链接

扫一扫