ajax 分页点击数据缓存
Posted whlbook
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax 分页点击数据缓存相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul,li list-style: none; </style> </head> <body> <!--<ul class="list"> <li></li> </ul>--> <table border="1" cellspacing="0" width="500"> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>信息</th> <th>编辑</th> </tr> <tbody id="tabList"> <!--<tr> <td>1</td> <td>summit</td> <td>2019-03-22</td> <td>gis</td> <td>删除</td> </tr> <tr> <td>1</td> <td>summit</td> <td>2019-03-22</td> <td>gis</td> <td>删除</td> </tr>--> </tbody> </table> <button id="sss1">1</button> <button id="sss">2</button> <button id="addList">添加数据</button> <script type="text/javascript" src="js/jquery-1.9.1.js" ></script> <script type="text/javascript"> var cacel = ; //保存缓存数据 var page = function () return function (page, fn) // console.log(cacel[page]) // console.log(page) if(cacel[page]) ajaxList(cacel[page]) fn && fn(); else $.ajax( type:"get", url:"http://127.0.0.1:3001/list", data: page:page , success: function(data) console.log(data); if(data.ok) cacel[page] = data.list; console.log(cacel) //console.log() ajaxList(data.list) fn && fn(); // $("#tabList").empty(); // var str = ‘‘; // for(var i = 0;i<data.list.length;i++) // str += "<tr><td>" + (i + 1) + "</td><td>" + data.list[i].name + "</td><td>" + data.list[i].time + "</td><td>" + data.list[i].info + "</td><td onclick=‘delet(\""+data.list[i].listNo+"\")‘>删除</td></tr>" // // $("#tabList").append(str); ); var p = page(); $(function() p(1) ); $("#sss").on("click", function() p(6) ) $("#sss1").on("click", function() p(1) ) function ajaxList(pageNo) let data = pageNo; //$.ajax( // type:"get", // url:"http://127.0.0.1:3001/list", // data: // page:pageNo // , // async:true, // success: function(data) // console.log(data); // if(data.ok) $("#tabList").empty(); var str = ‘‘; for(var i = 0;i<data.length;i++) str += "<tr><td>" + (i + 1) + "</td><td>" + data[i].name + "</td><td>" + data[i].time + "</td><td>" + data[i].info + "</td><td onclick=‘delet(\""+data[i].listNo+"\")‘>删除</td></tr>" $("#tabList").append(str); // // //); $("#addList").click(function() $.ajax( type:"get", url:"http://127.0.0.1:3001/addList", async:true, success: function(data) ajaxList(); console.log(data); ); ); function delet(listNo) $.ajax( type:"get", url:"http://127.0.0.1:3001/deletList", data: listNo: listNo , async:true, success: function(data) if(data.ok) ajaxList(); console.log(data); ); // console.log(i) </script> </body> </html>
以上是关于ajax 分页点击数据缓存的主要内容，如果未能解决你的问题，请参考以下文章