您的位置: 首页  >  文章  >  web PC分页功能实现。动态加载数据列表并分页

web PC分页功能实现。动态加载数据列表并分页

分类: 文章 • 2023-03-31 14:24:54

1.最终效果图展示：

web PC分页功能实现。动态加载数据列表并分页

2.代码截图：

web PC分页功能实现。动态加载数据列表并分页

3.代码文字：

<！DOCTYPE HTML>
<HTML>

<head>
<meta charset="utf-8">
<meta name="keywords" content="分页教程">
<meta name="description" content="****平台分页功能相互学习">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="msapplication-tap-highlight" content="no">
<!-- 移动web页面自动探测电话号码 -->
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta http-equiv="Content-Security-Policy" content="">
<meta http-equiv="cleartype" content="on">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="app-version" content="1.13.3">
<meta name="author" content="xin xiao yong">
<title>分页</title>
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 网页标题图标 -->
    <link rel="icon" href="active_img/logo.ico" type="image/x-icon">  
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="common.js" type="text/javascript"></script>
    <script src="browser_check.js" type="text/javascript"></script>  
    <script src="mui.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
</head>


<BODY> 

 <！ - html部分 - >
<table id =“Allactivities”class =“table text-center table-bordered blue”>
         <thead>
                 <tr>
                      <th> Id
                      <th>发布人</>第>
                      <TH>邀请方</次>
                      <TH>标题</次>
                      <TH>开始时间</次>
                      <TH>结束时间</次>
                      <TH>活动地点</次>
                      <TH>活动类型</次>
                      <th>联系电话</ th>
                      <th>人数限制</ th>
                      <th>内容</ th>
                      <th>操作</ th>
                      展示设置</ th>
                 </ tr>
         </ THEAD>
         <TBODY>
                                   
         </ TBODY>
         <TFOOT>
                 <TR>
                      <TDç±»=“中心” NOWRAP =“真”列跨度=“8”风格=“边界：无;”>                                  
                         <DIV ID =“PAGE-
                              TRUN “> 总共<跨度类=‘toastRecords’> </跨度>条记录＆NBSP;
                              分为<跨度类=‘toastpages’> </跨度>页＆NBSP;
                              当前为第<跨度类=‘pageCurrent’> </ span>页面＆nbsp;
                              每页<span class =“pagesize”> </ span>条记录＆nbsp;
                              <
                                   <a href="#" id="firstPage">首页</a>
                                   <a href="#" id="prevPage">上一页</a>
                                   <a href =“＃”id =“nextPage” >下一页</a>
                                   <a href="#"id=" lastPage">末页</a>
                                   <select id =“gotoPage”onchange =“getId（value）”> </ select>
                              </ span >
                       </ div>
                   </ td>
              </ tr>
         </ tfoot>
</ TABLE>

<！ - js部分 - >
<script type =“text / javascript”>


//分页列表
    getSystemActivityList（）;
    函数getSystemActivityList（）{
         $ .ajax（{
             type：“POST”，
             url：“后台提供的分页数据接口”，
             data：{curpage：$（'.pageCurrent'）.text（），pagesize：10}，
             success ：function（data）{
                 //console.log (data ，“活动数据列表分页”）;
                 if（data.code == 200）{
                      //后天返回总记录数
                      var R = data.count;
                      // console。 log（R，“后台返回的总记录数”）;
                      //当前页
                      var C = 1;

                      var B;
                      //每页显示记录数
                      var S = 10;
                      //显示总记录数 
                      。$（ “toastRecords”）文本（R）;
                      //显示当前页数据
                      。$（ “pageCurrent”）文本（C）;
                      //每页显示数据的数量
                      。$（ “页面大小”）文本（S）;
                      //页码选择框
                 var option ='';
                      //判断是否总记录数/每页显示数据量是否可以整除
                      if（R％S == 0）{//偶数页
                          B = parseInt（R / S）;
                          for（var i = 1; i <= B; i ++）{
                              option + ='<option value ='+ i +'
                          }
                      } else {//奇数页
                          B = parseInt（R / S）;
                          for（var i = 1; i <= B; i ++）{
                              option + ='<option value ='+ i +'>'+ i +'</ option>'
                          }
                      }
                      //显示分页的数据
                      $（“。toastpages” ）的.text（B）;
                      //显示选择菜单的数据
                      $（ “＃GotoPage记述”）HTML（可选）。
                 } else {
                      $（“＃Allactivities tbody”）。html（''）;
                 }
             }
         }）;
    };
    $（”
    var C = $（“。pageCurrent”）。text（）;
    //获取select的值
    函数getId（value）{
         C = value;
         $（ “pageCurrent”）文本（C）。
         systemActivity_list（）
    };
    //（首页按钮点击事件
    $（“＃firstPage”）。on（“click”，function（e）{
         e.preventDefault（）;
         C = 1;
         $（“.pageCurrent”）.text（C）;
         $（ “#gotoPage”）。val（C）
         systemActivity_list（）;
 
    }）;     on（“click”，function（e）{          e.preventDefault（）;          if（parseInt（$（“.pageCurrent”）。text（））>
 
    //上一页按钮点击事件
$（“＃prevPage” 1）{              C = parseInt（$（“。




             C = 1;
         };
         $（ “pageCurrent”）文本（C）。
         $（ “＃GotoPage记述”）VAL（C）。
         systemActivity_list（）;
 
    }）;
    //（下一页按钮点击事件
    $（“＃nextPage”）。on（“click”，function（e）{
         e.preventDefault（）;
         if（parseInt（$（“.pageCurrent”）.text（））< parseInt（$（“。toastpages”）。text（）））{
             C = parseInt（$（“.pageCurrent”）。text（））+ 1;
         } else {
             C = $（“。toastpages”）。text ）;
         };
         $（“。pageCurrent”）.text（C）;
         $（“＃gotoPage”）.val（C）;
         systemActivity_list（）
    }）;


         e.preventDefault（）;
         C = $（ “toastpages。”）文本（）。
         $（ “pageCurrent”）文本（C）。
         $（ “＃GotoPage记述”）文本（C）。
         systemActivity_list（）;
    }）;
 
//活动数据列表
   å‡½æ•°systemActivity_list（）{
          $ .ajax（{
              type：“POST”，
              url：“后台返回的显示数据”，
              data：{curpage：$（'.pageCurrent'）。text（），pagesize： 10}，
              success：function（data）{
                  //console.log (data ，“全部系统活动”）;
                 if（data.code == 200）{//判断前端否请求是否成功，后台是否顺利返回数据    
                     var html =“”;
                     //循环后台返回的json对象格式数据
                     for（var i = 0; i <data.infor.length; i ++）{
                        var data_infor = data.infor [i];
                        if（data_infor.charges == 0）{
                            data_infor.charges =“免费”;
                        }
                        //模板字符串动态加载数据列表
                        的HTML + =`
                            <TR>
                               <TD风格= “填充：4像素;”> $ {data_infor.id} </ TD>
                               <TD> $ {data_infor.staff_id} </ TD>
                               <td title =“$ {data_infor.inviter}”> $ {data_infor.inviter} </ td>
                               <td title =“$ {data_infor.subject}”>
                               <td title =“$ {data_infor.start_time}”> $ {data_infor.start_time} </ td>
                               <td title =“$ {data_infor.end_time}”> $ {data_infor.end_time} </ td>
                               <td title = “$ {data_infor.active_place}”> $ {data_infor.active_place} </ td>
                               <td> $ {data_infor.charges} </ td>
                               <td title =“$ {data_infor.mobile}”> $ {data_infor.mobile } </ td>
                               <td> $ {data_infor.limit_people} </ td>
                               <td title =“$ {data_infor.task_txt}”> $ {data_infor.task_txt} </ td>
                               <td>
                                   <a class =“btn btn-info examine”style =“padding：0px;” data-toggle =“modal”data-target =“＃addActive”>查看</a>
                                   <a class="btn btn-primary deletedData" style="padding:0px;">删除</a>
       
                               </ td>
                               <td>
                                   <a class =“btn btn-success showData”style =“padding：0px;” title =“$ {data_infor.is_show}”>设置</a>
                                   <span class =“btn btn-warning”style =“color：blue; padding：1px”> $ {data_infor.is_show} </ span>
                               </ TD>
                               
                            </ tr>
                        `;
                     }
                     //数据列表显示页面
                     $（“＃Allactivities tbody”）。html（html）;
                 } else {
                  toast（“网络错误，请检查！”）;
                 }
              }
          }）;
       }  
//页面刚加载时显示全部系统活动
   $（function（）{
       systemActivity_list（）; 
  }）;

</ script>

</ body>            

</ html>


 æç¤ºï¼šã€‚如果要复制该代码到本地运行，请注意更换'引用文件地址'和后台返回接口，否则会出现一系列跨域问题状语从句：资源找不到的问题。水平有限，本文档仅供初学者或首次开发提供参考。如代码有错误之处，请见谅。如果有更好的开发经验，谢谢回复。谢谢观看！


相关推荐