好多兄弟和我说，我写的只有分页不能搜索，今天给大家上个好家伙，和昨天不能搜索的版本合并了，老性子，直接上干货
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/jquery-3.7.1.js"></script> <style> .data_content { width: 60%; margin-left: 20%; display: flex; flex-direction: column; align-items: center; background-color: antiquewhite; } .content_box { margin: 10px 0; padding: 10px; border: 1px solid #ccc; width: 80%; display: flex; justify-content: space-around; } .but_page { display: flex; justify-content: center; margin-top: 20px; } .but_page button { padding: 8px 16px; margin: 0 5px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } .but_page button:hover { background-color: royalblue; } .twig { line-height: 35px; margin-left: 10px; } .page_datas { margin-left: 500px; margin-top: 15px; } .seek_box { text-align: center; margin-bottom: 30px; } .centent_ts { width: 100%; height: 50px; font-size: 12px; color: red; text-align: center; position: absolute; top: 35px; } </style> </head> <body> <!-- 搜索框 --> <div class="seek_box"> <input type="text" class="input_value" /> <button onclick="scr()">搜索</button> </div> <!-- 存放数据 --> <div class="data_content"></div> <!-- 底部页码 --> <div class="but_page"></div> <!-- 页码跳转和每页数据 --> <div class="page_datas"> <input type="number" class="href_but" /> <button onclick="href_page()">跳转</button> <select name="" class="per_page"> <option value="10">每页10条数据</option> <option value="5">每页5条数据</option> <option value="15">每页15条数据</option> </select> </div> <div class="centent_ts"> </div> <script> //全局变量 let data; let num = 10; //每页数据 let k = 0; //第几页 let k_all; //一共多少页 // 请求假数据 $.ajax({ type: "GET", url: "js/new_file.json", success: function(res) { data = res; console.log(data); applyColours(data); }, }); // 渲染函数 function applyColours(data) { k_all = Math.ceil(data.length / num); //获取到总共多少页 //渲染内容 let str = ''; for (let i = k * num; i < (k + 1) * num; i++) { if (data[i] == undefined) { break; } str += ` <div class="content_box"> <div>${data[i].id}</div> <div>${data[i].name}</div> <div>${data[i].gender}</div> <div>${data[i].content}</div> <div>${data[i].age}</div> </div>`; } $('.data_content').html(str); //渲染按钮 let std = ``; std += `<button onclick="but_top()">上一页</button>` for (let i = 0; i < k_all; i++) { std += `<button onclick="buts(${i})">${i+1}</button>` } std += `<button onclick="but_bottom()">下一页</button>` std += `<div class="twig">共${data.length}条</div>` std += `<div class="twig">共${k_all}页</div>` std += `<div class="twig">当前第${k+1}页</div>` $('.but_page').html(std); $(".but_page button").eq(k + 1).css("background-color", "aquamarine") } // 点击上一页事件 function but_top() { if (k > 0) { k--; } else { $('.centent_ts').html("当前已经是第一页") setTimeout(function() { $('.centent_ts').html("") }, 2000); } console.log(k); applyColours(data); } // 点击下一页事件 function but_bottom() { if (k < k_all - 1) { k++; } else { $('.centent_ts').html("当前已经是最后一页") setTimeout(function() { $('.centent_ts').html("") }, 2000); } applyColours(data); }; // 点击按钮跳转 function buts(da) { k = da; applyColours(data); } // 输入页码跳转事件 function href_page() { // 获取输入框里面的值 k = $('.href_but').val() - 1; // 判断是否执行渲染函数的条件 if (k >= 0 && k <= k_all - 1 && k % 1 === 0) { applyColours(data); } else { //提示用户的内容 $('.centent_ts').html("请不要输入小数，负数") //设置定时器，使提示用户的消息两秒后消失 setTimeout(function() { $('.centent_ts').html("") }, 2000); } } // 每页数据 $('.per_page').on('change', function() { // 使用户保持所在内容页 // 获取每页多少条数据 num = $('.per_page').val(); new_page = Math.ceil(data.length / num); if (k <= new_page) { applyColours(data); } else { k = new_page - 1; applyColours(data); } console.log(new_page); }); // 点击搜索 function scr() { // 获取用户输入的值进行搜索 let input_value = $('.input_value').val(); // 定义一个空数组进行放入数据 let arr = []; for (let i = 0; i < data.length; i++) { //如果有相同的字样就把他放入数组中 if (data[i].name.indexOf(input_value) >= 0) { arr.push(data[i]); } } applyColours(arr); } console.log(k); </script> </body> </html>
我是小辉，请大家多多关照
