前后端分离,通用分页js处理模板

功能

        **可实现一个页面多个ajax无刷新分页列表**

        **可解决页面数量非常多的问题**

效果:

前后端分离,通用分页js处理模板_第1张图片

截图:

前后端分离,通用分页js处理模板_第2张图片

 步骤:

第一步:

    创建一个index.html
    引入    
    
    
    
    

第二步:

    在index.html的body复制进去
     
    
    在最下面加入

    

第三步:

    配置page-zjs-20230630.js各项参数

    TODO的地方是你需要改的,其他地方不需要改

index.html




    
    Title
    
    
    

    
  



序号 名称
1 张三

page-zjs-20230630.js

//注意
//1,如果一个页面多个分页列表的话  一个js控制一个列表,tobody的类标签名字不同即可。
//2,目前查询只支持get请求
//3,TODO的地方需要你修改,其他地方不需要做任何修改


    //这几个参数需要需要你配置   TODO
    let var_PageSize = 10;//每页数量
    let var_pageNo = 1;//初始页码
    let total = 0;//全局变量
    let PageIndex = 0;//全局变量
    let PageSize = 0;//全局变量
    let totalPage = 0;//全局变量
    let var_url ="http://172.17.4.220:8080/info/lhxm-fb!getLhxmfbFenzhanData.action?PageSize="+var_PageSize;


    $(document).ready(function () {
            //获取接口数据
            let url = var_url+"&pageNo="+var_pageNo;
            //第一页调用
            getData(url,var_pageNo);

    })
    function getData(url,current_page) {
        //搜索条件   TODO
        // let lhfbjg = $("#u name" ).val();
        // let lhfbjg = "中国技术交易所有限公司";
        // if(lhfbjg!=""){
        //     url=url+"&lhfbjg="+lhfbjg;
        // }
        let result ={};
        console.log("第"+current_page+"页的结果:"+url);
        $.ajax({
            url:url,
            type : "get",    //请求类型
            dataType:'json',
            success:function(result){
                  //遍历数据的地方    TODO

                  //页码(数据总条数-当前页)
                  if(current_page==1){
                      pageHtml.empty();
                      setPageValue(result);
                  }
                  console.log(result);
            }
        })
    }

   function setPageValue(result){
        total = result.total; // 数据总条数
        PageIndex = result.pageNo;// 当前页
        PageSize = var_PageSize; //一页显示10条
        totalPage =  Math.ceil(result.total / PageSize);// 获取到总页数
        setPages(total,PageIndex,PageSize,pageHtml,totalPage);
    }

    function setPages(total,PageIndex,PageSize,pageHtml,totalPage) {
            event.preventDefault();
            let needPlus;
            //控制有无数据
            if(totalPage==0){
                  needPlus  = "" ;
            }else if (totalPage > 0&&PageIndex!=totalPage) {
                  needPlus = "href='"+var_url+"&pageNo="+(PageIndex+1)+"'";
            }else if (totalPage > 0&&PageIndex==totalPage) {
                 // needPlus = PageIndex == totalPage >0 ? "" : "href='"+var_url+"&pageNo="+(PageIndex+1)+"'";
                  needPlus="";

            }
            let needReduce = PageIndex == 1 ? "" : "href='"+var_url+"&pageNo="+(PageIndex-1)+"'";
            // console.log("右侧链接"+needPlus);
            // console.log("左侧链接"+needReduce);
            let pageBtnPrev = "
  • "; let pageBtnNext = "
  • "; let pageTips = "
    " + PageIndex + " " + "-" + " " + totalPage + " " + "of" + " " + total + " " + "items" + "
    "; pageHtml.append(pageBtnPrev); // 添加左按钮 // 第一页 let firstPage = $("
  • 1
  • "); // 最后一页 let lastPage = $("
  • " + totalPage + "
  • "); // 左省略号 let leftOmitPage = $("
  • ...
  • "); // 右省略号 let rightOmitPage = $("
  • ...
  • "); // 左省略号图标 let leftOmitIcon = $("" + ""); // 右省略号图标 let rightOmitIcon = $("" + ""); // 总页数小于等于10页全部显示 if (totalPage <= 10) { for (let i = 1; i <= totalPage; i++) { pageHtml.append($("
  • " + i + "
  • ")); } } else if (PageIndex <= 8) { //总页数大于10且当前页远离总页数 for (let i = 1; i <= 9; i++) { pageHtml.append($("
  • " + i + "
  • ")); } pageHtml.append(rightOmitPage); pageHtml.append(lastPage); //总页数大于10且当前页接近总页数 } else if (PageIndex > totalPage - 7) { pageHtml.append(firstPage); pageHtml.append(leftOmitPage); for (let i = totalPage - 8; i <= totalPage; i++) { pageHtml.append($("
  • " + i + "
  • ")); } //除开上面两个情况 当前页在中间 } else { pageHtml.append(firstPage); pageHtml.append(leftOmitPage); for (let i = PageIndex - 3; i <= PageIndex + 3; i++) { pageHtml.append($("
  • " + i + "
  • ")); } pageHtml.append(rightOmitPage); pageHtml.append(lastPage); } $(".pagination li[pagenumber='" + PageIndex + "']").addClass('active'); pageHtml.append(pageBtnNext); // 添加右按钮 pageHtml.append(pageTips); // 添加右下角items提示栏 /* 点击页码按钮进行翻页 */ $(".pagination li[pagenumber]").on('click', function() { // 页数跳转 pageHtml.empty(); PageIndex = Number($(this).text()); // 当前页 $('input[name=pagenumber]').attr('value', PageIndex); // 当前第几页 $(this).siblings('li').removeClass('active'); $(this).addClass('active'); setPages(total,PageIndex,PageSize,pageHtml,totalPage); let current_url = $(this).children("a").attr("href"); // var_pageNo = PageIndex; getData(current_url,PageIndex); }) /* 点击按钮进行翻页 */ $(".btnPrev").on('click', function () { // 向左翻页 if (PageIndex > 1) { PageIndex--; pageHtml.empty(); setPages(total,PageIndex,PageSize,pageHtml,totalPage); let current_url = $(this).children("a").attr("href"); var_pageNo = PageIndex; getData(current_url,PageIndex); } $(this).addClass('disabled'); }) $(".btnNext").on('click', function () { // 向右翻页 if (PageIndex < totalPage) { PageIndex++; pageHtml.empty(); setPages(total,PageIndex,PageSize,pageHtml,totalPage); let current_url = $(this).children("a").attr("href"); var_pageNo = PageIndex; getData(current_url,PageIndex); } $(this).addClass('disabled'); }) /* 点击左省略号向左翻页 */ $('#leftOmit').click(function () { if (PageIndex > 10) { PageIndex -= 10; pageHtml.empty(); setPages(total,PageIndex,PageSize,pageHtml,totalPage); var_pageNo = PageIndex; let current_url = var_url+"&pageNo="+PageIndex; getData(current_url,PageIndex); } }) /* 点击右省略号向右翻页 */ $('#rightOmit').click(function () { if (PageIndex <= totalPage - 10) { PageIndex += 10; pageHtml.empty(); setPages(total,PageIndex,PageSize,pageHtml,totalPage); var_pageNo = PageIndex; let current_url = var_url+"&pageNo="+PageIndex; getData(current_url,PageIndex); } }) /* 左省略号移入移出 */ $('#leftOmit').mouseenter(function () { $(this).children().html(leftOmitIcon); }) $('#leftOmit').mouseleave(function () { $(this).children().html('...'); }) /* 右省略号移入移出 */ $('#rightOmit').mouseenter(function () { $(this).children().html(rightOmitIcon); }) $('#rightOmit').mouseleave(function () { $(this).children().html('...'); }) }

    jquery-3.7.0要是粘贴在这里,提示【文字太多,发布不了】,所以随便下载一个版本就可以。

    参考:bootstrap分页处理_bootstrap分页过多_big_title的博客-CSDN博客

    你可能感兴趣的:(javascript,开发语言,ecmascript)