使用创建交互式、快速动态网页应用的网页开发技术实现分页技术

创建交互式、快速动态网页应用的网页开发技术分页效果图如下：

首先，先看超文本标记语言代码和半铸钢钢性铸铁(铸造半钢)代码，我们需要一个桌子和一个页脚：

div id='全局' div id='表'表栏宽='19% '栏宽='19% '栏宽='19% '栏宽='19% '栏宽='24%' tr th日期/th时间/th事件/th报警画面/th事件备注/th/tr/table/div div id=' footer ' span id=' summary '/span ul id=' pagining ' Li id=' 01 '首页/li li id='02 '上一页/li li id='03 '下一页/li li id='04 '最后一页/li /ul div id='select' span跳转到/span输入类型=“文本”名称='page_num' span页/span输入类型='按钮'名称='go_btn '值='跳转/div /div/div下面是钢性铸铁代码：

#全局{位置：相对；} # table { position : absolutetop :19左：1.6%;宽度： 55%;} #表格文字区{宽度： 10 VW高度： 10vh背景色-:透明；color: # fff边框宽度： 0;文本对齐：中心；}表格，th，td { border: 0.2px固态rgba(60，166，206，0.2)；边界崩溃：崩溃；color:rgba(60，166，206，1)；}th，td { padding: 3px文本对齐：中心；font-size : 1.6 vmin}td{ background: rgba(2，29，54，1)；}th{ background: rgba(20，29，54，1)；padd : 1.8% 0；color: rgba(255，255，255，0.8)；} #页脚{位置：绝对值；bottom:5vh左侧大众：7；文本对齐：中心；color: rgba(60，166，206，1)；} #分页{显示：内联块；} #分页li { display: inline} #选择{ display : inline-block；左边距left: 40px} #选择input[type=' text ']{ width : 30px；高度： 20像素背景色： # 000;边框宽度： 1px} #选择输入[type=' button ']{ width : 40px；高度： 23px背景技术： # 000;border : none } ul Li { cursor :指针；}初始化开始日期，结束日期，请求的页数，请求的每页数量，总共有多少页数据，并通过创建交互式、快速动态网页应用的网页开发技术将这些数据传给后台提供的应用程序接口数据接口，进而从数据库中获取到数据，然后可以在前端展示：

var start_date='2017-01-01 '，end _ date=' 2017-01-08 '；var页码=1；var page SiZe=4；var page=0；如何获取表格的数据并将其附加到前端？如何获取分页的数据并将其附加到前端？使用下面我们定义的函数：

加载数据（页码，页面大小);

接下来看这个函数如何跟应用程序接口数据接口沟通：

函数loadData(页码，页面大小){ $(')。细节')。移除();//每次重新从应用程序接口数据接口获取数据都要先清除原先表格“tr”的内容$.ajax({ url: '/history_alarm '，type: 'POST '，data : JSON。stringify({ date : date，page _ num:pageNo，page_size:pageSize})，success : function(result){ var results=JSON。解析(结果)；var list=results.alarmvar总计数=results。alarm _ countpage=results . page _ countif(list . length！=0){ for(var I=0；ilist . lengthi){ var alarm _ id=list[I].alarm _ idvar alarm_pic=list[i].alarm _ picvar date=list[i].日期；定义变量事件=列表[i].事件；变化时间=列表[i].时间；定义变量备注=列表[i].备注；appendData(alarm_id，alarm_pic，日期，事件，时间，备注);addEvent(alarm _ id)；} $(“# table”).show()；$(' #页脚').show()；显示页脚（总计数，页数，页码);} else{ $('#table ').hide()；$(' #页脚').hide()；} }，错误： function(){//错误处理函数} });}在loadData这个函数中我们还定义了另外3个函数，接下来我们先来看附录数据：

//注意到我们将` alarm_id '作为文本区域“类”的值，也作为提交按钮` id的值，这是因为我们要通过创建交互式、快速动态网页应用的网页开发技术将用户输入到某一个`文本区域的值作为参数传给后台应用程序接口接口，由其写入数据库函数appendData(alarm_id，alarm_pic，日期，事件，时间，备注){ var text=' tr class=' detail ' TD ' date '/tdtd ' time '/tdtd ' event '/TD ' ' tdimg class=' img 01 ' src=data : image/JPEG；base64，' alarm _ pic '/TD ' ' TD class=' modity _ BTN ' textarea cols=' 5 ' row=' 3 ' class=' alarm _ id ' '备注/text area ' ' img id=' alarm _ id ' src=' http : { { static _ URL(' slice/modify。png ')} } '/TD/tr '；$('#table table ').追加（文本);}//该函数定义了如何通过创建交互式、快速动态网页应用的网页开发技术将用户输入到某一个`文本区域的值作为参数传给后台应用程序接口接口，并写入数据库函数addEvent(alarm _ id){ $(“#”alarm _ id).单击(函数(){ var备注=$(')。alarm_id).val()；如果(备注！=''){ $.ajax({ url:'/history_alarm '，type:'POST '，data : JSON。stringify({ alarm _ id : alarm _ id，note:remark})，success : function(result){ var results=JSON。解析(结果)；if(结果。status==' ok '){控制台。日志(' ok ')；} } }) })))函数显示页脚(总计数，页数，页码){ var newText='共"总计"条，' '第"页码"页，' '共页面页；$('#summary ').文本（新文本);}获取数据的函数写好了，接下来就要点击分页的"首页、上一页、下一页、最后一页、跳转"时候所对应的事件了。思路是这样的：用户点击分页的每一个项目，都要重新判断页码，然后将页码作为参数，再次调用获取数据的应用程序接口接口：

$('input[name='page_num']').向下键(函数(e){ if(e . key code==13){ $(' input[name=' go _ BTN ']').单击();} });$('input[name='go_btn']').单击(function(){ var gopag=$(' input[name=' page _ num ']').val()；if(GoPage=1 GoPage=page GoPage！=页码){页码=goPage加载数据（页码，页面大小);} else { return false } })；$('#01').点击(function(){页码=1；加载数据（页码，页面大小);});$('#04').点击(function(){页码=页数；加载数据（页码，页面大小);});$('#02').单击(function(){ if(page no==1){ return false；} else {页码-；加载数据（页码，页面大小);}});$('#03').单击(function(){ if(page no==pages){ return false；} else {页码加载数据（页码，页面大小);}});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。