Web页面分页显示+局部刷新

最新推荐文章于 2024-08-16 15:07:38 发布

JankoWilliam

最新推荐文章于 2024-08-16 15:07:38 发布

阅读量4k

点赞数 2

分类专栏： Web前端文章标签： Web页面分页展示

本文链接：https://blog.csdn.net/sinat_34045444/article/details/85018993

版权

Web前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Web页面分页展示+局部刷新

整合handlebars.js+自定义分页按钮jquery

设计背景：

在日常的Web开发中，我们经常做的一件事就是分页设计；Web页面分页展示可以给用户非常良好的体验，所以做好分页将是程序员的一项基本功。分页的后台设计，使用过MyBatis、Hibernate、JFinal等框架的童鞋都知道，后台分页查询只需要套用模板代码，操作极其简单，如果用原生sql语句编写对于我们来说也是常规操作。分页的前端设计，使用原生jQuery和JSTl+EL语句实现，当点击翻页按钮时刷新整个页面将不需要过多的DOM拼接操作，使用EL语句取值便是；但有些业务场景，翻页并不需要刷新页面，所以点击按钮实现局部请求数据，响应之后就需要大量的DOM拼接代码，这样会更加繁琐。本文介绍使用handlebars.js插件实现模板式页面刷新，并采用自定义分页按钮jQuery插件实现按钮展示。

1. 环境搭建

1.1 handlebars.js

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。可通过如下地址下载：http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v4.0.12.js。

<script type="text/javascript" src="/js/assets/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/js/handlebars/handlebars-v4.0.12.js"></script>

需要映入jQuery。

1.2 myPagination

自定义一个分页按钮插件（或网上下载），有js代码和css样式代码，实现分页按钮的动态展示和发送数据请求。这里提供本文使用下载：

http://pj992190r.bkt.clouddn.com/myPagination.css

http://pj992190r.bkt.clouddn.com/myPagination.js

<link rel="stylesheet" href="/js/pagination/myPagination.css">
<script src="/js/pagination/myPagination.js"></script>

2. 代码编写

2.1 实现业务目标

1544879621279

分页展示数据列表，点击按钮实现局部刷新。

2.2 HTML代码

<h2>Hello Pagination!</h2>
<%--表格--%>
<table id="myList">

</table>
<%--分页按钮--%>
<div id="pagination" class="pagination"></div>

准备table标签和翻页按钮容器div标签。

2.2 handlebars模板代码

<script id="entry-template" type="text/x-handlebars-template">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    {{#list list}}
    <tr>
    <td>{{id}}</td>
    <td>{{name}}</td>
    <td>{{age}}</td>
    </tr>
    {{/list}}
</script>

自定义handlebars模板，实现DOM拼接。

2.3 JS代码

Ⅰ. handlebars操作（加载模板）

//自定义handlebars模板，DOM拼接（表格）
Handlebars.registerHelper('list', function(items, options) {
    var out = "";
    for(var i=0, l=items.length; i<l; i++) {
        out = out+options.fn(items[i]);
    }
    return out;
});
//加载自定义handlebars模板
var source = $("#entry-template").html();
var template = Handlebars.compile(source);

Ⅱ. 加载翻页按钮方法

//加载翻页按钮
function loadPage(total,pages,curPage) {
    new Page({
        id: 'pagination',
        pageTotal: pages, //必填,总页数
        pageAmount: 5,  //每页多少条
        dataTotal: total, //总共多少条数据
        curPage:curPage, //初始页码,不填默认为1
        pageSize: 5, //分页个数,不填默认为5
        showPageTotalFlag:true, //是否显示数据统计,不填默认不显示
        showSkipInputFlag:true, //是否支持跳转,不填默认不显示
        getPage: function (page) {
            //分页查询
            queryDatas(page);
        }
    })

}

Ⅲ. 分页查询方法

//分页查询
function  queryDatas(pageNum) {
    var params={};
    params.pageNum=1;//默认查询第一页
    params.pageSize=5;//每页显示5条
    //params.xxx = "xxx",这里也可以添加查询条件
    if(pageNum==null){
        params.pageNum=pageNum;
    }
    $.ajax({
        type:"post",
        url: "/myJson.json",//这里本地模拟请求的json数据
        data:params,
        dataType:"json",
        success:function (data) {
            var list=data.list;//后台传来的数据列表
            var total=data.total;//总记录条数
            var pages=data.pages;//总记录页数
            var curPage=data.pageNum;//当前页数
            if(data.total>0){
                //调用上述按钮加载方法
                loadPage(total,pages,curPage);
                // 使用handlebars模板拼接列表dom并输出到页面
                var html = template(data);
                document.getElementById("myList").innerHTML = html;
            }else{
                $("#pagination").html("<img style='margin-left: -70px;padding:40px;' " +
                    "src='/img/zanwushuju.png'>");//这里进行未查询到数据的操作
            }
        }
    })
}

Ⅴ. 页面加载完毕执行

$(function () {
    queryDatas(1);//页面初次加载时默认查询第一页
});

2.4 json数据模拟

myJson.json文件，模拟本地响应请求。

{
  "pageNum": 1,
  "pageSize": 5,
  "size": 5,
  "total": 7,
  "pages": 2,
  "list":[
        {
          "id": "001",
          "name": "zhangsan",
          "age": 19
        },
        {
          "id": "002",
          "name": "lisi",
          "age": 20
        },
        {
          "id": "003",
          "name": "wangwu",
          "age": 21
        },
        {
          "id": "004",
          "name": "zhaoliu",
          "age": 22
        },
        {
          "id": "005",
          "name": "tianqi",
          "age": 23
        }
      ]
}

3. 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <%@ page contentType= "text/html;charset=utf-8"%>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pagination</title>
    <link rel="stylesheet" href="/js/pagination/myPagination.css">
    <style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
    </style>
    <script type="text/javascript" src="/js/assets/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="/js/handlebars/handlebars-v4.0.12.js"></script>
</head>
<body>
<h2>Hello Pagination!</h2>
<%--表格--%>
<table id="myList">

</table>
<%--分页按钮--%>
<div id="pagination" class="pagination"></div>

</body>
<script src="/js/pagination/myPagination.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    {{#list list}}
    <tr>
    <td>{{id}}</td>
    <td>{{name}}</td>
    <td>{{age}}</td>
    </tr>
    {{/list}}
</script>

<script type="text/javascript">
    $(function () {
        queryDatas(1);
    });

    //自定义handlebars模板，拼接DOM（列表）
    Handlebars.registerHelper('list', function(items, options) {
        var out = "";
        for(var i=0, l=items.length; i<l; i++) {
            out = out+options.fn(items[i]);
        }
        return out;
    });
    //加载自定义handlebars模板
    var source = $("#entry-template").html();
    var template = Handlebars.compile(source);

    //加载分页按钮
    function loadPage(total,pages,curPage) {
        new Page({
            id: 'pagination',
            pageTotal: pages, //必填,总页数
            pageAmount: 5,  //每页多少条
            dataTotal: total, //总共多少条数据
            curPage:curPage, //初始页码,不填默认为1
            pageSize: 5, //分页个数,不填默认为5
            showPageTotalFlag:true, //是否显示数据统计,不填默认不显示
            showSkipInputFlag:true, //是否支持跳转,不填默认不显示
            getPage: function (page) {
                //分页查询
                queryDatas(page);
            }
        })
    }

    //分页查询
    function  queryDatas(pageNum) {
        var params={};
        params.pageNum=1;
        params.pageSize=5;
        if(pageNum==null){
            params.pageNum=pageNum;
        }

        $.ajax({
            type:"post",
            url: "/myJson.json",
            data:params,
            dataType:"json",
            success:function (data) {
                var list=data.list;
                var total=data.total;
                var pages=data.pages;
                var curPage=data.pageNum;
                if(data.total>0){
                    //调用按钮加载
                    loadPage(total,pages,curPage);
                    // 使用handlebars模板拼接列表dom并输出到页面
                    var html = template(data);
                    document.getElementById("myList").innerHTML = html;
                }else{
                    $("#pagination").html("<img style='margin-left: -70px;padding:40px;' " +
                                          "src='/img/zanwushuju.png'>");
                }
            }
        })

    }

</script>
</html>