Jquery中Ajax和bootstrap的前端分页详写

最新推荐文章于 2024-06-02 10:47:03 发布

穿着红色卫衣的程序猿

最新推荐文章于 2024-06-02 10:47:03 发布

阅读量637

点赞数 1

分类专栏：笔记晨讲文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/guozhe888/article/details/115330418

版权

笔记同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

晨讲

1 篇文章 0 订阅

订阅专栏

一、

1.进入https://v3.bootcss.com/的基本模板中粘贴Bootstrap 页面

在这里插入图片描述

2.在body中添加内容，在script标签上面，分成块

<body>
<div class="container">
    <h2>系统公告客户端设计实现(Bootstrap+jquery)</h2>
</div>
<div>

    <div>
        <h2>内容列表区</h2>
        <table class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr><td colspan="6">数据正在加载中</td></tr>
            </tbody>
        </table>
    </div>
    <div>
        <h2>代码编辑区</h2>
    </div>
</div>

在这里插入图片描述

3.把ajax写成doGetNotices()函数，并放在页面加载完成时执行

$(function () {//页面加载完成执行
    doGetNotices();
})
function doGetNotices(){
<!--基于jquery中的Ajax函数向服务器发起异步请求-->
    $.ajax({
        url:"http://localhost:8080/notice/",
        success(result){
            console.log(result);
            doHandleQueryResponseResult(result);
        }
    })
}

4.处理查询响应结果doHandleQueryResponseResult(result)

//处理查询响应结果
function doHandleQueryResponseResult(result) {
    if(result.state==1){
        doHandleQueryOk(result);
    }else{
        //doHandleQueryErroy();
    }
}

5.处理正确响应结果doHandleQueryOk(result)

//处理正确响应结果
function doHandleQueryOk(result) {
    //设置tbody中的内容
    doSetTableBodyRows(result.data.list);
    //设置分页信息
    doSetPagination();
}

6.设置tbody中的公告或通知信息doSetTableBodyRows(records)

//设置tbody中的公告或通知信息
function doSetTableBodyRows(records) {
    //1.获取tbody对象，并清空原有内容
    let tBody = $("tbody");
    tBody.empty();
    //2.迭代records中的内容，并追加到tbody中
    //console.log("records",records);
    records.forEach((item)=>tBody.append(doCreateRow(item)));
}
function doCreateRow(item) {
    return `<tr><td>1</td>
                <td>${item.title}</td>
                <td>${item.type}</td>
                <td>${item.status}</td>
                <td>${item.createdTime}</td>
                <td>delete</td>
            </tr>`
}

在这里插入图片描述

7.把返回的结果处理其状态、类型和序号(数组中是从0开始的，所以i+1)

//设置tbody中的公告或通知信息
function doSetTableBodyRows(records) {
    //1.获取tbody对象，并清空原有内容
    let tBody = $("tbody");
    tBody.empty();
    //2.迭代records中的内容，并追加到tbody中
    //console.log("records",records);
    records.forEach((item,i)=>tBody.append(doCreateRow(item,i)));
}
function doCreateRow(item,i) {
    return `<tr><td>${i+1}</td>
                <td>${item.title}</td>
                <td>${item.type=='1'?"通知":"公告"}</td>
                <td>${item.status=='0'?"正常":"关闭"}</td>
                <td>${item.createdTime}</td>
                <td>delete</td>
            </tr>`
}

在这里插入图片描述

8.添加其分页功能,并为每个按钮添加class选择器

<div class="pagination">
    <button class="pre">上一页</button>
    <button class="percent">1/16</button>
    <button class="next">下一页</button>
     <form style="display: inline">
         <input type="text" name="pageCurrent">
         <input type="button" value="跳转" class="jump">
     </form>
</div>

在这里插入图片描述

9.在类选择器为pagination的容器对象注册click事件，当点击容器内部的pre,next,jump类元素时，跳转到指定页码,执行doJumpToPage函数(功能只能实现一次，因为是假定数据)

$(function () {//页面加载完成执行
     doGetNotices();
     //分页时间注册及处理
     //在类选择器为pagination的容器对象注册click事件，当点击容器内部的pre,next,jump类元素时，
     // 跳转到指定页码,执行doJumpToPage函数
     $(".pagination").on("click",".pre,.next,.jump",doJumpToPage)
 });
 //基于点击事件进行分页查询
function doJumpToPage() {
    //debugger
    //1.获取被点击对象的class属性值的一函数
        //$(this)表示被点击对象
        //prop函数为jqery中用于操作属性
        //prop(属性名[,属性值])  []中可有可无
    let cls = $(this).prop("class");
    //2.基于被点击对象属性值修改当前页码值
        //获取当前页码值
    let pageCurrent=2;//当前页
    let pageCount=10;//总页数
        //修改当前页码值
    if(cls=="pre"&&pageCurrent>1){
        pageCurrent--;
    }else if(cls=="next"&&pageCurrent<pageCount){
        pageCurrent++;
    }else if(cls=="jump"){
        let pageC=$("form input[name=pageCurrent]").val();
        if(pageC<1||pageC>pageCount){
            alert("页码值不合法");
            return;
        }
        pageCurrent=pageC;
    }else{
        return;
    }
    console.log("pageCurrent",pageCurrent)
    //3.基于新的页码值重新查询
}

10.基于新的页码值重新查询，调用doGetNotices()函数

//基于点击事件进行分页查询
function doJumpToPage() {
    //debugger
    //1.获取被点击对象的class属性值的一函数
        //$(this)表示被点击对象
        //prop函数为jqery中用于操作属性
        //prop(属性名[,属性值])  []中可有可无
    let cls = $(this).prop("class");
    //2.基于被点击对象属性值修改当前页码值
        //获取当前页码值
    let pageCurrent=2;//当前页
    let pageCount=10;//总页数
        //修改当前页码值
    if(cls=="pre"&&pageCurrent>1){
        pageCurrent--;
    }else if(cls=="next"&&pageCurrent<pageCount){
        pageCurrent++;
    }else if(cls=="jump"){
        let pageC=$("form input[name=pageCurrent]").val();
        if(pageC<1||pageC>pageCount){
            alert("页码值不合法");
            return;
        }
        pageCurrent=pageC;
    }else{
        return;
    }
    console.log("pageCurrent",pageCurrent)
    window.localStorage.setItem("pageCurrent",pageCurrent);//把这个值存到浏览器中
    //3.基于新的页码值重新查询
    doGetNotices();
}
 function doGetNotices(){
    let pageCurrent=localStorage.getItem("pageCurrent");
    if(!pageCurrent)pageCurrent=1;//在js中非0就是true
    let params={pageCurrent:pageCurrent};//定义请求参数
     console.log("params",params);
 <!--基于jquery中的Ajax函数向服务器发起异步请求-->
     $.ajax({
         url:"http://localhost:8080/notice/",
         data:params,
         success(result){
             console.log(result);
             doHandleQueryResponseResult(result);
         }
     })
 }

在这里插入图片描述

11.let定义当前页，总页数、请求参数params、url、初始化分页信息

function doGetNotices(){
   let pageCurrent=localStorage.getItem("pageCurrent");
   if(!pageCurrent)pageCurrent=1;//在js中非0就是true
   let params={pageCurrent:pageCurrent};//定义请求参数
    let url = "http://localhost:8080/notice/";
    console.log("params",params);
<!--基于jquery中的Ajax函数向服务器发起异步请求-->
    $.ajax({
        url:url,
        data:params,
        success(result){
            console.log(result);
            doHandleQueryResponseResult(result);
        }
    })
}
//处理正确响应结果
function doHandleQueryOk(result) {
    //设置tbody中的内容
    doSetTableBodyRows(result.data.list);
    //设置分页信息
    doSetPagination(result);
}
//初始化分页信息
function doSetPagination(result) {
   //初始化页面上的分页数据
   let pageCurrent=result.data.pageNum;//当前页码值
   let pageCount = result.data.pages;//总页数
    $(".percent").html(pageCurrent+"/"+pageCount);
    //将当前页码值存储带浏览器的localStorage对象中
    localStorage.setItem("pageCurrent",pageCurrent);
    localStorage.setItem("pageCount",pageCount);

在这里插入图片描述

12.去掉跳转页面后输入框的数值: $(“form input[name=pageCurrent]”).val("");

//基于点击事件进行分页查询
function doJumpToPage() {
    //debugger
    //1.获取被点击对象的class属性值的一函数
        //$(this)表示被点击对象
        //prop函数为jqery中用于操作属性
        //prop(属性名[,属性值])  []中可有可无
    let cls = $(this).prop("class");
    //2.基于被点击对象属性值修改当前页码值
        //获取当前页码值
    let pageCurrent=localStorage.getItem("pageCurrent");//当前页
    let pageCount=localStorage.getItem("pageCount");//总页数
        //修改当前页码值
    if(cls=="pre"&&pageCurrent>1){
        pageCurrent--;
    }else if(cls=="next"&&pageCurrent<pageCount){
        pageCurrent++;
    }else if(cls=="jump"){
        let pageC=$("form input[name=pageCurrent]").val();
        if(pageC<1||pageC>pageCount){
            alert("页码值不合法");
            return;
        }
        pageCurrent=pageC;
       $("form input[name=pageCurrent]").val("");
    }else{
        return;
    }
    console.log("pageCurrent",pageCurrent)
    window.localStorage.setItem("pageCurrent",pageCurrent);//把这个值存到浏览器中
    //3.基于新的页码值重新查询
    doGetNotices();
}

在这里插入图片描述

13.总体页面切换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <h2>系统公告客户端设计实现(Bootstrap+jquery)</h2>
</div>
<div>

    <div>
        <h2>内容列表区</h2>
        <table class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr><td colspan="6">数据正在加载中</td></tr>
            </tbody>
        </table>
    </div>
    <div class="pagination">
        <button class="pre">上一页</button>
        <button class="percent">1/16</button>
        <button class="next">下一页</button>
         <form style="display: inline">
             <input type="text" name="pageCurrent">
             <input type="button" value="跳转" class="jump">
         </form>
    </div>
    <div>
        <h2>代码编辑区</h2>
    </div>
</div>



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    $(function () {//页面加载完成执行
        doGetNotices();
        //分页时间注册及处理
        //在类选择器为pagination的容器对象注册click事件，当点击容器内部的pre,next,jump类元素时，
        // 跳转到指定页码,执行doJumpToPage函数
        $(".pagination").on("click",".pre,.next,.jump",doJumpToPage)
    });
    //基于点击事件进行分页查询
   function doJumpToPage() {
       //debugger
       //1.获取被点击对象的class属性值的一函数
           //$(this)表示被点击对象
           //prop函数为jqery中用于操作属性
           //prop(属性名[,属性值])  []中可有可无
       let cls = $(this).prop("class");
       //2.基于被点击对象属性值修改当前页码值
           //获取当前页码值
       let pageCurrent=localStorage.getItem("pageCurrent");//当前页
       let pageCount=localStorage.getItem("pageCount");//总页数
           //修改当前页码值
       if(cls=="pre"&&pageCurrent>1){
           pageCurrent--;
       }else if(cls=="next"&&pageCurrent<pageCount){
           pageCurrent++;
       }else if(cls=="jump"){
           let pageC=$("form input[name=pageCurrent]").val();
           if(pageC<1||pageC>pageCount){
               alert("页码值不合法");
               return;
           }
           pageCurrent=pageC;
          $("form input[name=pageCurrent]").val("");
       }else{
           return;
       }
       console.log("pageCurrent",pageCurrent)
       window.localStorage.setItem("pageCurrent",pageCurrent);//把这个值存到浏览器中
       //3.基于新的页码值重新查询
       doGetNotices();
   }
    function doGetNotices(){
       let pageCurrent=localStorage.getItem("pageCurrent");
       if(!pageCurrent)pageCurrent=1;//在js中非0就是true
       let params={pageCurrent:pageCurrent};//定义请求参数
        let url = "http://localhost:8080/notice/";
        console.log("params",params);
    <!--基于jquery中的Ajax函数向服务器发起异步请求-->
        $.ajax({
            url:url,
            data:params,
            success(result){
                console.log(result);
                doHandleQueryResponseResult(result);
            }
        })
    }
    //处理查询响应结果
    function doHandleQueryResponseResult(result) {
        if(result.state==1){
            doHandleQueryOk(result);
        }else{
            //doHandleQueryErroy();
        }
    }
    //处理正确响应结果
    function doHandleQueryOk(result) {
        //设置tbody中的内容
        doSetTableBodyRows(result.data.list);
        //设置分页信息
        doSetPagination(result);
    }
    //初始化分页信息
    function doSetPagination(result) {
       //初始化页面上的分页数据
       let pageCurrent=result.data.pageNum;//当前页码值
       let pageCount = result.data.pages;//总页数
        $(".percent").html(pageCurrent+"/"+pageCount);
        //将当前页码值存储带浏览器的localStorage对象中
        localStorage.setItem("pageCurrent",pageCurrent);
        localStorage.setItem("pageCount",pageCount);

    }
    //设置tbody中的公告或通知信息
    function doSetTableBodyRows(records) {
        console.log("records",records)
        //1.获取tbody对象，并清空原有内容
        let tBody = $("tbody");
        tBody.empty();
        //2.迭代records中的内容，并追加到tbody中
        //console.log("records",records);
        //forEach为js的原生函数，item为数组中的一个元素，i为元素下标
        records.forEach((item,i)=>tBody.append(doCreateRow(item,i)));

    }

    // records.forEach(function (item,i) {
    //     let tr = doCreateRow(item,i);
    //     tBody.append(tr)
    // });



    function doCreateRow(item,i) {
        return `<tr><td>${i+1}</td>
                    <td>${item.title}</td>
                    <td>${item.type=='1'?"通知":"公告"}</td>
                    <td>${item.status=='0'?"正常":"关闭"}</td>
                    <td>${item.createdTime}</td>
                    <td>delete</td>
                </tr>`
    }
</script>
</body>
</html>

在这里插入图片描述

14.有个弊端，获取的pageCurrent等是字符串，不能正确的进行if判断，需将改成int型进行比对。同样页码超出pageCount跳出窗口后，也要清除输入框的页码值

let pageCurrent=parseInt(localStorage.getItem("pageCurrent"));//当前页
let pageCount=parseInt(localStorage.getItem("pageCount"));//总页数
let pageC=parseInt($("form input[name=pageCurrent]").val());
$("form input[name=pageCurrent]").val("");