Node学习（九）05-管理系统之英雄列表分页——分页的sql查询语句 & 服务端get接口写法、ajax请求数据之get请求写法 & Math.ceil()函数-返回大于或等于一个给定数字的最小整数

Node学习（九）05-管理系统之英雄列表分页——分页的sql查询语句 & 服务端get接口写法、ajax请求数据之get请求写法 & Math.ceil()函数-返回大于或等于一个给定数字的最小整数

七、分页

7.1 分页原理

必须的两个条件：

• 分页的页码（当前是第几页） — page
• 每页显示多少条 — pageNum

查询的SQL为：

-- 第一页 -- select * from heroes limit 0, 5 -- 第二页 -- select * from heroes limit 5, 5 -- 第三页 -- select * from heroes limit 10, 5 -- 第page页 select * from heroes limit (page-1) * pageNum, pageNum 

分页效果

7.2 修改getHeroes接口，将SQL换成通用的sql

app.js

// 1. 取出所有的英雄 app.get('/getHeroes', (req, res) => { 
    let page = 1; // 当前的页码 let pageNum = 5; // 每页显示多少条 // let sql = `select * from heroes limit ${(page-1) * pageNum}, ${pageNum}`; let sql = 'select * from heroes limit ' + (page-1) * pageNum + ',' + pageNum; db(sql, null, (err, result) => { 
    if (err) throw err; // 接口响应，响应查询到的结果 res.send(result); }); }); 

执行 git add . 和 git commit -m '修改getHeroes接口，使用通用的SQL'

7.3 基本实现分页

分页请求

前端index.html中，使用分页插件 twbs-pagination 。

做法：

修改前端代码，基本实现分页：

1. 向接口 getHeroes 发送请求的时候，要传递page参数，默认是1即可

2. 封装向接口 getHeroes 发送请求的代码为loadData函数，并且先调用一次

3. 将分页的代码封装成page函数，当点击页码的时候，修改params参数，并再次调用loadData

4. 在loadData中，当处理完当前页的数据之后，调用一次page
5. 为了不重复调用page函数，所以加入flag开关控制

到目前为止，无论点击哪个页码，服务器总是返回第1页的数据，是因为服务器接口，并没有接受page参数，所以修改getHeroes接口：

执行 git add . 和 git commit -m '基本实现了分页'

7.4 修改getHeroes接口，获取总页数

查询总页数的SQL： select count(*) c from heroes [where ...]

修改接口：

注：

Math.ceil() // 函数返回大于或等于一个给定数字的最小整数。 Math.ceil(null) ，// 返回整数 0  Math.ceil(0.95) // 1 Math.ceil(4) // 4 Math.ceil(7.004) // 8 Math.ceil(-7.004) // -7 // 如果是负数的话，那么获得整数就是舍去掉小数部分的整数了 

1

2

前端index.html中，修改代码：

执行 git add . 和 git commit -m '完成分页，加入总页数'

7.5 模糊搜索

前端点击 “查找” 的时候，获取输入框搜索的关键字。然后将它发送给服务器：

<script> / 模糊搜索 $('.btn-default').click(function (e) { 
    e.preventDefault(); // 获取到关键字。并使用trim方法去掉两边的空格 var serach = $('#search').val().trim(); flag = true; params.page = 1; params.keywords = serach; loadData(); }); </script>在这里插入代码片 

搜索的时候，肯定先显示搜索到的第一页，所以设置page=1。并且要设置上搜索的关键字。设置完毕，从新发送请求，即调用loadData();

服务端，修改查询的SQL即可：

执行 git add . 和 git commit -m '模糊搜索，差一个分页页码'

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10831.html