搜尋
首頁web前端js教程jQuery+ajax怎麼樣實作動態資料分頁
jQuery+ajax怎麼樣實作動態資料分頁
php中世界最好的语言
php中世界最好的语言
Mar 15, 2018 pm 01:19 PM
怎麼樣數據

這次為大家帶來jQuery+ajax怎麼樣實現動態資料分頁，用jQuery+ajax實現動態資料分頁的注意事項有哪些，下面就是實戰案例，一起來看一下。

用jQuery實作頁碼跳轉式動態資料分頁這個效果，這個效果最明顯的就是沒有資料載入和刷新頁面這個過程，再做小型資料的載入也多層級網頁載入的時候很有效。

#下面我們給出全部效果代碼：

HTML全部程式碼：

nbsp;html>


<met>

</met>

其中是資料JS內容，大家在實際操作的時候可以用JS取得json達到要的資料格式：

shujv2.js程式碼：

var data = [ {
  "warehouseID" : "3750",
  "warehouseCode" : "CK20140825061813777127447",
  "province" : "上海",
  "endProvince" : "江苏省",
  "provinceId" : "310000",
  "cityId" : "310100",
  "areaId" : "310109",
  "endProvinceId" : "320000",
  "endCityId" : "320600",
  "endAreaId" : "320612",
  "materialId" : "0",
  "material" : "",
  "specId" : "0",
  "productNId" : "0",
  "varietiesId" : "8",
  "varietiesTypeId" : "621",
  "taskCode" : "T1611230481",
  "customerID" : "20147",
  "customerName" : "阿斯蒂芬",
  "createDate" : "2016-11-23 18:41:40",
  "wareHouseName" : "找钢仓库",
  "city" : "上海市",
  "area" : "虹口区",
  "startAddr" : "逸仙路25号",
  "endCity" : "南通市",
  "endArea" : "通州区",
  "endAddr" : "1",
  "varietiesTypeName" : "钢材",
  "varieties" : "线材",
  "productN" : "",
  "spec" : "",
  "weight" : "1",
  "num" : "1",
  "receiver" : "",
  "receiverPhone" : "1",
  "remark" : "",
  "label" : "",
  "startAddrNumber" : "1",
  "varietiesNumber" : "1",
  "contactsId" : "22494",
  "contactsName" : "刘宇测试"
 } ]

#front-endPage.js是分頁載入的效果實現。程式碼為：

;(function($, window, document,undefined) {
 var cjjTable = function(ele,opt){
    this.$element = ele,
    this.defaults ={
       title:null,
       body:null,
       display:null,
       pageNUmber:8,
       pageLength:0,
       url:null,
       dbTrclick:function(that){
       }
    }
    this.options = $.extend({},this.defaults,opt)
 }
 cjjTable.prototype = {
    start:function(){
      var _this = this;
      var titlelistBox="";
      var titlesmall="";
      for(var i=0;i<_this.options.title.length>"+_this.options.title[i]+"";
        titlelistBox = titlesmall;
      }
      var json = "";
      var maxpagenumberBox = 7;//选择项最多的数量
      var json = this.options.url;
      var histroy_DDBox = "";
      var histroy_DD = "";
      var firstPageNumber=_this.options.pageLength>_this.options.pageNUmber?_this.options.pageNUmber:_this.options.pageLength;
      for (var i = 0; i <firstpagenumber>_this.options.title.length&&_this.options.display[x]!=undefined){
            display = _this.options.display[x]*1==1?"table-cell":"none";
          }
          bodyBox+="<td>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr>"+bodyBigBox+"</tr>";
        histroy_DDBox = histroy_DD;
      }
      $( _this.$element.selector+" table tfoot").html("");
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) == 1) {
        $( _this.$element.selector+" .nextPage").css("display", "none");
        $(_this.$element.selector+" .endPage").css("display", "none");
      }
      var maxpagenumberBoxBigbox = "";
      var maxpagenumberBoxBig = "";
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) ' + (i * 1 + 1) + '';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i ' + (i * 1 + 1) + '';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      var buttonTfoot = "<tr>"+
      "<td>"+
        "<p>"+
          "<input>"+
          "<button>确定</button>"+
          "</p>"+
          "<p>"+
            "<span>首页</span>"+
            "<span>上一页</span>"+
            "</p>
<ul>"+maxpagenumberBoxBigbox+"</ul>"+
            "<input>"+
            "<span>下一页</span>"+
            "<span>尾页</span>"+
          ""+
          "<p>"+
             "<select><option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
<option>200</option>
<option>500</option></select>"
          "</p>"+
        ""+
      "</td>
<td>"+
      "</td>
</tr>
<tr>";
      _this.$element.html("<table>
<thead>"+titlelistBox+"</thead>
<tbody>"+histroy_DDBox+"</tbody>
<tfoot>"+buttonTfoot+"</tfoot>
</table>");
      $(_this.$element.selector+ ' select').val(_this.options.pageNUmber);
      if(Math.ceil(_this.options.pageLength/_this.options.pageNUmber) 0 && val  Math.ceil(e.options.pageLength/ e.options.pageNUmber)) {
        var val2 = Math.ceil(e.options.pageLength / e.options.pageNUmber);
      }
      $(e.$element.selector+ ' .tfootRight input').val(val2);
    },
    button:function(e,maxpagenumberBox,json){
      var val = $(e.$element.selector+ ' .tfootRight input').val();
      $(e.$element.selector+ " .typeNumber").val(val);
      if (val != "") {
        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    firstPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ " .typeNumber").val(1);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    endPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ " .typeNumber").val(Math.ceil(e.options.pageLength / e.options.pageNUmber));
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    nextPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ " .typeNumber").val();
      $(e.$element.selector+ " .typeNumber").val(number * 1 + 1);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
  
    },
    nextTableLi:function(e,maxpagenumberBox,json,that){
      var val = that.html();
      $(e.$element.selector+ " .typeNumber").val(val);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    lastPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ " .typeNumber").val();
      if (number > 1) {
        $(e.$element.selector+ " .typeNumber").val(number * 1 - 1);
        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    select:function(e,maxpagenumberBox,json,that){
      var select = that.find("option:selected").val();
      $(e.$element.selector+ " .typeNumber").val(1); 
      e.options.pageNUmber = select;
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    page:function(Pagenumber, pageNUmber, maxpagenumberBox,json,that,e) {
      var histroy_DDBox = "";
      var histroy_DD = "";
      var lastPage=Pagenumber<math.ceil>e.options.title.length&&e.options.display[x]!=undefined){
            display = e.options.display[x]*1==1?"table-cell":"none";
          }
          bodyBox+="<td>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr>"+bodyBigBox+"</tr>";
        histroy_DDBox = histroy_DD;
      }
      $(that.selector+" table tbody").html(histroy_DD);
      var maxpagenumberBoxBigbox = "";
      var maxpagenumberBoxBig = "";
      if (Math.ceil(e.options.pageLength/ e.options.pageNUmber) ' + (i * 1 + 1) + '';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i ' + (i * 1 + 1) + '';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      $(that.selector+" table tfoot ul").html(maxpagenumberBoxBigbox);
      if (Pagenumber == 1) {
        $(that.selector+" .firstPage,"+that.selector+" .lastPage").hide();
      } else {
        $(that.selector+" .firstPage,"+that.selector+" .lastPage").show();
      }
      if (Pagenumber == Math.ceil(e.options.pageLength / pageNUmber)) {
        $(that.selector+" .endPage,"+that.selector+" .nextPage").hide();
      } else {
        $(that.selector+" .endPage,"+that.selector+" .nextPage").show();
      }
      if (Math.ceil(e.options.pageLength/ pageNUmber) > maxpagenumberBox) {
        if (Pagenumber > 0 && Pagenumber ' + (i * 1 + 1) + '';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
        } else if (Pagenumber >= Math.ceil(maxpagenumberBox / 2) * 1 + 1 && Pagenumber ' + (i) + '';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Math.ceil(maxpagenumberBox / 2) - 1).addClass('pagenumberBoxLi');
        } else if (Pagenumber >= Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2 && Pagenumber ' + (i * 1 + 1) + '';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - Math.ceil(e.options.pageLength/ pageNUmber) + maxpagenumberBox * 1 - 1).addClass('pagenumberBoxLi');
        }
      } else {
        if (Pagenumber <p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p>
<p>推薦閱讀：</p>
<p><a href="http://www.php.cn/js-tutorial-388657.html" target="_blank">HTML+CSS+jQuery實作輪播廣告圖</a></p>
<p><a href="http://www.php.cn/js-tutorial-388656.html" target="_blank">html+css+jquery實作樓層捲動效果</a></p></math.ceil>
</tr></firstpagenumber></_this.options.title.length>

以上是jQuery+ajax怎麼樣實作動態資料分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
解读CRISP-ML（Q）：机器学习生命周期流程解读CRISP-ML（Q）：机器学习生命周期流程Apr 08, 2023 pm 01:21 PM

译者 | 布加迪审校 | 孙淑娟目前，没有用于构建和管理机器学习（ML）应用程序的标准实践。机器学习项目组织得不好，缺乏可重复性，而且从长远来看容易彻底失败。因此，我们需要一套流程来帮助自己在整个机器学习生命周期中保持质量、可持续性、稳健性和成本管理。图1. 机器学习开发生命周期流程使用质量保证方法开发机器学习应用程序的跨行业标准流程（CRISP-ML（Q））是CRISP-DM的升级版，以确保机器学习产品的质量。CRISP-ML（Q）有六个单独的阶段：1. 业务和数据理解2. 数据准备3. 模型

人工智能的环境成本和承诺人工智能的环境成本和承诺Apr 08, 2023 pm 04:31 PM

人工智能(AI)在流行文化和政治分析中经常以两种极端的形式出现。它要么代表着人类智慧与科技实力相结合的未来主义乌托邦的关键，要么是迈向反乌托邦式机器崛起的第一步。学者、企业家、甚至活动家在应用人工智能应对气候变化时都采用了同样的二元思维。科技行业对人工智能在创建一个新的技术乌托邦中所扮演的角色的单一关注，掩盖了人工智能可能加剧环境退化的方式，通常是直接伤害边缘人群的方式。为了在应对气候变化的过程中充分利用人工智能技术，同时承认其大量消耗能源，引领人工智能潮流的科技公司需要探索人工智能对环境影响的

Windows 10企业版2016长期服务版的综合评价如何？Windows 10企业版2016长期服务版的综合评价如何？Jan 15, 2024 pm 03:18 PM

win10里面有非常多的系统可以选择使用，其中win10企业版2016长期服务版就是一个比较好用的系统版本，其中不管是功能还是什么都很不错，如果你日常使用的话这个系统版本可以说是非常优秀的。win10企业版2016长期服务版怎么样答：表现很不错。该产品乃是专门针对企业级客户量身打造，致力于构建出稳定、高效且安全性极高的计算环境。win10企业版2016长期服务版介绍1、保障：Windows2016企业版长期服务诚挚地向用户提供长达五年的充分主流支持以及同等时长的深入扩展支持2、系统经过层层把关的

找不到中文语音预训练模型？中文版 Wav2vec 2.0和HuBERT来了找不到中文语音预训练模型？中文版 Wav2vec 2.0和HuBERT来了Apr 08, 2023 pm 06:21 PM

Wav2vec 2.0 [1]，HuBERT [2] 和 WavLM [3] 等语音预训练模型，通过在多达上万小时的无标注语音数据（如 Libri-light ）上的自监督学习，显著提升了自动语音识别（Automatic Speech Recognition, ASR），语音合成（Text-to-speech, TTS）和语音转换（Voice Conversation，VC）等语音下游任务的性能。然而这些模型都没有公开的中文版本，不便于应用在中文语音研究场景。 WenetSpeech [4] 是

win10 LTSC版本的评价如何？win10 LTSC版本的评价如何？Dec 25, 2023 pm 04:25 PM

很多小伙伴不确定win10ltsc版本好不好，其实这款版本相较于其他版本还是很不错的，软件非常的干净，可以说没有其他多余的app，所以还是比较不错的。win10ltsc版本怎么样：答：相对来说还是很不错的win10ltsc版本相对来说还是很不错的，内容非常的干净，很适合喜欢干净的小伙伴下载。Win10LTSC版主要优点概述：优势一：此版本剔除了附加应用程序、Edge浏览器以及小娜，充分展现出其精简特性，避免了用户误操作导致不必要的干扰。同时，服务更为简化，运行速度也相应提升。优势二：1、对大部分

条形统计图用什么呈现数据条形统计图用什么呈现数据Jan 20, 2021 pm 03:31 PM

条形统计图用“直条”呈现数据。条形统计图是用一个单位长度表示一定的数量，根据数量的多少画成长短不同的直条，然后把这些直条按一定的顺序排列起来；从条形统计图中很容易看出各种数量的多少。条形统计图分为：单式条形统计图和复式条形统计图，前者只表示1个项目的数据，后者可以同时表示多个项目的数据。

自动驾驶车道线检测分类的虚拟-真实域适应方法自动驾驶车道线检测分类的虚拟-真实域适应方法Apr 08, 2023 pm 02:31 PM

arXiv论文“Sim-to-Real Domain Adaptation for Lane Detection and Classification in Autonomous Driving“，2022年5月，加拿大滑铁卢大学的工作。虽然自主驾驶的监督检测和分类框架需要大型标注数据集，但光照真实模拟环境生成的合成数据推动的无监督域适应（UDA，Unsupervised Domain Adaptation）方法则是低成本、耗时更少的解决方案。本文提出对抗性鉴别和生成（adversarial d

一文分析POLYDOGE币未来潜力怎么样？一文分析POLYDOGE币未来潜力怎么样？Jul 15, 2024 pm 05:24 PM

POLYDOGE币的英文全称是PolyDoge，其实这个Polydoge是polygon上的meme社区代币，目前已经发行以Polydoge为主题的NFT，并开始与Netvrk合作开发PlaytoEarn游戏。POLYDOGE是在Polygon网络上诞生的代币，同时它也是该链上的第一个meme硬币，就在几天前它变成了跨链，并且可以在Crypto.com的Cronos网络上找到。有传言称，著名的币安智能链也即将发布。很多投资者都想要知道这个POLYDOGE币未来潜力怎么样？下面就让小编为大家说一说

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
4 週前ByDDD
顯示更多

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小，語法高亮，不支援程式碼提示功能

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7355
15
Java教學
1628
14
CakePHP 教程
1353
52
Laravel 教程
1265
25
PHP教程
1214
29
顯示更多