如何使用ajax实现分页技术

 
 
 
 
 
 
 
 
 
 
 
 
 
 
日期
时间
事件
报警画面
事件备注
 

下面是 css 代码：

#global{
 position: relative;
}
#table{
 position: absolute;
 top:19%;
 left:1.6%;
 width: 55%;
}
#table textarea{
 width: 10vw;
 height: 10vh;
 background-color: transparent;
 color: #fff;
 border-width: 0;
 text-align: center;
}
table, th, td {
 border: 0.2px solid rgba(60,166,206,0.2);
 border-collapse: collapse;
 color:rgba(60,166,206,1); 
}
th, td {
 padding: 3px;
 text-align: center;
 font-size: 1.6vmin;
}
td{
 background: rgba(2,29,54,1);
}
th{
 background: rgba(20,29,54,1);
 padding: 1.8% 0;
 color: rgba(255,255,255,0.8);
}
#footer{
 position: absolute;
 bottom:5vh;
 left:7vw;
 text-align: center;
 color: rgba(60,166,206,1);
}
#pagination{
 display: inline-block;
}
#pagination li{
 display: inline;
}
#select{
 display: inline-block;
 margin-left: 40px;
}
#select input[type="text"]{
 width: 30px;
 height: 20px;
 background-color: #000;
 border-width: 1px;
}
#select input[type="button"]{
 width: 40px;
 height: 23px;
 background: #000;
 border:none;
}
ul li{
 cursor: pointer;
}

初始化开始日期，结束日期，请求的页数，请求的每页数量，总共有多少页数据，并通过 ajax 将这些数据传给后台提供的 API 数据接口，进而从数据库中获取到数据，然后可以在前端展示：

var start_date = "2017-01-01", end_date = "2017-01-08";
var pageNo = 1;
var pageSize = 4;
var pages = 0;

如何获取表格的数据并将其 append 到前端？如何获取分页的数据并将其 append 到前端？使用下面我们定义的函数：

loadData(pageNo, pageSize);

接下来看这个函数如何跟 API 数据接口沟通：

function loadData(pageNo, pageSize){
 $(".detail").remove(); //每次重新从 API 数据接口获取数据都要先清除原先表格 `` 的内容
 $.ajax({
 url: "/history_alarm",
 type: "POST",
 data: JSON.stringify({date:date, page_num:pageNo, page_size:pageSize}),
 success:function(result){
 var results = JSON.parse(result);
 var list = results.alarm;
 var totalCount = results.alarm_count;
 pages = results.page_count;
 if(list.length != 0){
  for(var i=0; i
在 loadData 这个函数中我们还定义了另外3个函数，接下来我们先来看 appendData：
//注意到我们将 `alarm_id` 作为 `` 'class` 的值，也作为提交按钮 `id` 的值，这是因为我们要通过 ajax 将用户输入到某一个 `<textarea>` 的值作为参数传给后台 API 接口，由其写入数据库。
function appendData(alarm_id, alarm_pic, date, event, time, remark){
 var text = '<tr class="detail"><td>'+date+'</td><td>'+time+'</td<td>'+event+'</td>'+
  '<td><img class="img01" src=data:image/jpeg;base64,' + alarm_pic + '</td>'+
  '<td class="modity_btn"><textarea cols="5" rows="3" 
  class='+alarm_id+'>'+remark+''+'';;

 $("#table table").append(text);
 }
//该函数定义了如何通过 ajax 将用户输入到某一个 `` 的值作为参数传给后台 API 接口，并写入数据库
function addEvent(alarm_id){
 $("#"+alarm_id).click(function(){
 var remark = $("."+alarm_id).val();
 if(remark != ""){
 $.ajax({
  url:"/history_alarm",
  type:"POST",
  data:JSON.stringify({alarm_id:alarm_id, note:remark}),
  success:function(result){
  var results = JSON.parse(result);
  if(results.status == "ok"){
  console.log('ok');
  }
  }
 })
 }
 })
 }</pre><pre>function displayFooter(totalCount, pages, pageNo){
 var newText = '共' + totalCount + '条，' + '第' + pageNo + '页，' + '共' + pages + '页';
 $("#summary").text(newText);
 }</pre><p>获取数据的函数写好了，接下来就要点击分页的“首页、上一页、下一页、最后一页、跳转”时候所对应的事件了。思路是这样的：用户点击分页的每一个项目，都要重新判断 pageNo，然后将 pageNo 作为参数，再次调用获取数据的 API 接口：</p><pre>$("input[name='page_num']").keydown(function(e){ if(e.keyCode == 13){ $("input[name='go_btn']").click(); } });

$("input[name='go_btn']").click(function(){
 var goPage = $("input[name='page_num']").val();
 if(goPage >= 1 && goPage <=pages && goPage != pageNo){
  pageNo = goPage;
  loadData(pageNo, pageSize);
 } else{
  return false;
 }
});

$("#01").click(function(){
 pageNo = 1;
 loadData(pageNo, pageSize);
});

$("#04").click(function(){
 pageNo = pages;
 loadData(pageNo, pageSize);
});

$("#02").click(function(){
 if(pageNo == 1){
  return false;
 } else{
  pageNo--;
  loadData(pageNo, pageSize);
 }
});

$("#03").click(function(){
 if(pageNo == pages){
  return false;
 } else{
  pageNo++;
  loadData(pageNo, pageSize);
 }
});</pre><p>看完了这篇文章，相信你对“如何使用ajax实现分页技术”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！</p>            
            
                        <br>
            网页名称：如何使用ajax实现分页技术            <br>
            当前链接：<a href="http://shouzuofang.com/article/ihiggj.html">http://shouzuofang.com/article/ihiggj.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/ddjjdoj.html">java上传后端代码 java文件上传代码</a>
                </li><li>
                    <a href="/article/ddjjddd.html">阿里云服务器安装mysql视频教程 阿里云部署mysql</a>
                </li><li>
                    <a href="/article/ddjjogs.html">帝国cms使用cdn 帝国cms如何使用</a>
                </li><li>
                    <a href="/article/ddjjdos.html">cms帝国公告取消关联 帝国cms自动推送插件</a>
                </li><li>
                    <a href="/article/ddjjopo.html">php免数据库登录验证 php做登录验证</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="message">
        <div class="mess container">
            <p>免费获取网站建设与品牌策划方案报价</p>
            <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span>
            <form action="">
                <input type="text" class="ipt1" placeholder="联系人">
                <input type="text" class="ipt2" placeholder="联系电话">
                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。">
                提交需求
            
        
    
    

        

            

                
联系我们
                028-86922220
                
手机：13518219792
                
地址：成都市太升南路288号锦天国际A幢1002号
                

                
24小时服务热线：400-028-6601
            
            

                
网站建设服务
                
网页设计
                
网站制作
                
网站开发
            
            

                
网站推广服务
                
营销网站建设
                
百度快速排名
                
整站网站推广
            
            

                
网站运维服务
                
基础维护
                
网站改版
                
网站维护
            
            

                
FOLLOW US
                

                

                    
微信二维码
                    
微信二维码
                
            
        
        

            友情链接：
            响应式网站建设   户外广告设计   乐山中领科信   网站定制   成都企业网站设计   珉田数据中心   雅安托管服务器   广安网站设计   德阳机房   成都品牌网站设计           
    
    

        

            

                Copyright © 2022  四川攀枝花网站建设公司     四川攀枝花网站建设公司-选我们！四川专业的攀枝花网站制作公司！
            
            

                All Rights Reserved 版权所有 蜀ICP备2024105912号-3