微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Bootstrap作者：编程之家原文地址AI导航网

一、

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>

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Bootstrip HTML 查询搜索常用格式模版
Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&quot;form-inline my-3 d-flex align-items-center justify-content-start&quot; method=&quot;get&quot; action=&q
如何在按钮上加红色数字
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在按钮上显示红色数字。以下是一个例子： &lt;button class=&quot;btn btn-primary&quot;&gt; My Button &lt;span class=&quot;badge badge-dan
让两个按钮左右排列
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它们放置在同一行中。你可以将按钮放置在两个 col 中，分别占据一定的列宽。以下是你的模板代码做出的修改： {% extends &#39;base.html&#39; %} {% block content %} &lt;div c
status能否设置为布尔值类型，前端采用复选框形式
是的，可以将status设置为布尔类型，这样可以在前端使用复选框形式展示。在模型中的定义可以如下： class Acceptance(models.Model): # ... status = models.BooleanField(default=False) 然后在前端模板中使用{{ form.
Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
bootstrap 模态框
（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
BootStrap图片样式
图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
bootstrap日期选择
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
bootstrap-treeview 使用小记
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native