html代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../day18/js/vue.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="../day13/bootstrap4.min.css">

</head>

<body>

    <div id="app">

        <input type="search" placeholder="请输入关键字" v-model="list.word" @keyup.enter="search()">

        <table class="table">

            <tr>

                <th>主键ID</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

                <th>班级</th>

                <th>操作</th>

            </tr>

            <tr v-for="(v,k) in list.data">

                <th>{{v.uid}}</th>

                <th>{{v.name}}</th>

                <th>{{v.sex==1?'男':'女'}}</th>

                <th>{{v.age}}</th>

                <th>{{v.cname}}</th>

                <th>

                    <a href="#" @click="del(k)">删除</a>

                </th>

            </tr>

        </table>

        <a href="#" @click="page(1)">首页</a>

        <a href="#" @click="page(2)">上一页</a>

        <a href="#" @click="page(3)">下一页</a>

        <a href="#" @click="page(4)">尾页</a>

    </div>

</body>

</html>

<script>

    new Vue({

        el:'#app',

        data:{

            list:[]

        },

        methods:{

            //搜索

            search(){

                var obj = this;

                var word = obj.list.word;//关键字

                axios.get('list.php?word='+word)

                .then(function (e) {

                    obj.list = e.data;//cpage、data、last_page、next、prev

                    console.log(e.data);

                })

            },

            //自定义方法/自定义函数

            page(text){

                var obj = this;//提前声明this函数

                var word = obj.list.word;

                //判断页码p

                if(text==1){//首页

                    var p = 1;

                }else if(text==2){//上一页

                    var p = obj.list.prev;

                }else if(text==3){//下一页

                    var p = obj.list.next;

                }else if(text==4){//尾页

                    var p = obj.list.last_page;

                }else{

                    var p = 1;//其他情况

                }

                axios.get('list.php?page='+p+'&word='+word)

                .then(function (e) {

                    obj.list = e.data;//cpage、data、last_page、next、prev

                    console.log(e.data);

                })

            },

            //ajax删除

            del(k){

                if(confirm('确定要删除吗？')){

                    var obj = this;

                    var uid = obj.list['data'][k]['uid'];

                    //ajax

                    axios.get('del.php?uid='+uid)

                    .then(function (e) {

                        if(e.data!=3){

                            alert('删除失败');

                            return false;

                        }

                        // obj.list['data'].splice(k,1);

                        axios.get('list.php?page='+obj.list.cpage)

                        .then(function (e) {

                            obj.list = e.data;//cpage、data、last_page、next、prev

                            console.log(e.data);

                        })

                    })

                }

            }

        },

        created(){

            var obj = this;

            //页面加载后自定执行

            axios.get('list.php')

            .then(function (e) {

                obj.list = e.data;//cpage、data、last_page、next、prev

                console.log(e.data);

            })

        }

    })

</script>

php原生代码：

<?php

$link = mysqli_connect('127.0.0.1','root','root','1906');

mysqli_set_charset($link,'utf8');

//逻辑操作

//接收关键字

$word = $_GET['word'];

//1、接收当前页

$page = isset($_GET['page']) ? $_GET['page'] : 1;

//2、设置每页显示的条数

$length = 3;

//3、求出总条数

if(empty($word)){

    $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid";

}else{

    $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid where a.name like '%$word%'";

}

$res = mysqli_query($link,$sql);//结果集

$count = mysqli_num_rows($res);//总条数

//4、总页数

$last_page = ceil($count/$length);

//5、偏移量=（当前页-1）*每页显示的条数

$limit = ($page-1)*$length;

//6、查询

if(empty($word)){

    $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid limit $limit,$length";

}else{

    $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid where a.name like '%$word%' limit $limit,$length";

}

$res = mysqli_query($link,$sql);//结果集

$data = mysqli_fetch_all($res,1);//将结果集转化成二维关联数组

//释放结果集

mysqli_free_result($res);

//关闭数据库

mysqli_close($link);

//返回结果

$arr['last_page'] = $last_page;//最后一页

$arr['prev'] = $page-1<=1 ? 1 : $page-1;//上一页

$arr['next'] = $page+1>=$last_page ? $last_page : $page+1;//下一页

$arr['cpage'] = $page;//当前页

$arr['data'] = $data;//页面展示的数据

$arr['word'] = $word;//搜索的关键字

echo json_encode($arr);

使用VUE+原生PHP完成搜索后分页的效果的更多相关文章

  1. 关于TP5.0搜索后分页

    使用$Model->where($where)->paginate($page,$count);的时候如果点击下一页会出现条件重置问题,经过测试可以使用Db::name('data') - ...

  2. 微信小程序 和 laravel8 实现搜索后分页 加载

    Page({ /** * 页面的初始数据 */ data: { activity:{}, page:1, last_page : 0, keyword:'' }, //加载 scroll(e){ le ...

  3. jQuery页面替换+php代码实现搜索后分页

    HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  4. lavarel 框架 搜索后分页

    ................框架控制器 public function list(Request $request){ $word=$request->input('word'); $arr ...

  5. django分页及搜索后如何翻页

    django自带了Pagnator 导入 from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage 分页 def ...

  6. 第三百七十节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页

    第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页 逻辑处理函数 计算搜索耗时 在开始搜索前:start_time ...

  7. 测试开发【提测平台】分享9-DBUntils优化数据连接&实现应用搜索和分页功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 从本期开始知识点讲以思维导图的形式给出,内容点会按照讲解-应用-展示的形式体现,这样会更清晰些. DBUntils连接池 在项目中链接数据 ...

  8. MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页

    系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 我工作的源码:http://www.jin ...

  9. 夺命雷公狗---DEDECMS----33dedecms自定义搜索以及分页功能完成

    我们现在要开始实现模版里面的搜索功能了,我们先找要做出一个检索提交表单,如下所示: 只要我们点击生成之后我们的表单就获取到了,可以直接拿生成好的html表单拿来用来测试下.. 将他嵌入首页的模版文件, ...

随机推荐

  1. spring security 入门级全篇代码

    CustomAccessDecisionManager 类 ---------------------------------------------------------------------- ...

  2. spring框架学习日志一

    一.简介 1.对spring框架的简单理解 可以理解为它是一个管理对象的创建.依赖.销毁的容器 Spring 是一个开源框架. Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单 ...

  3. Mybatis中多表联查，查询出来的字段出现重名，造成数据异常的解决方法！

    在做一对多出现的问题,引发的思考:当数据库表中,主表的主键id和明细表的中的字段名相同时怎么办?Mybatis进行自动映射赋值的时候会不会出现异常?                      注意:M ...

  4. Bing每日壁纸的RESTful接口实现

    0x00 存在意义 权且当作Docker打包的练习. 显然可以通过构造请求获得每天的壁纸,但是如果想要优雅地在其它地方使用这一网络资源,封装一个RESTful API将会保证整洁美观,在编写CSS等场 ...

  5. WSL(Ubuntu)下安装Redis

    一.安装 输入命令安装redis-server sudo apt-get install redis-server 安装完成后打开redis.conf文件,找到bind 127.0.0.1,更改为bi ...

  6. VSCode添加某个插件后，Python 运行时出现Segmentation fault (core dumped) 解决办法

    在VSCode添加某个插件后,Debug出现Segmentation fault (core dumped) 解决方案,在当前environment下运行: conda update --all

  7. Dubbo | Dubbo快速上手笔记 - 环境与配置

    目录 前言 1. Dubbo相关概念 1.1 自动服务发现工作原理 2. 启动文件 2.1 zookeeper-3.4.11\bin\zkServer.cmd 2.2 zookeeper-3.4.11 ...

  8. RHEL7.2下DHCP服务器的搭建

    DHCP(?Dynamic Host Configuration Protocol)是一种帮助计算机从指定的DHCP服务器获取配置信息的自举协议 请求配置信息的计算机叫做DHCP客户端,而提供信息的叫 ...

  9. Hopper Disassembler系列之Sublime Text 3 爆破

    https://www.52pojie.cn/thread-793069-1-1.html 当参数少于7个时, 参数从左到右放入寄存器: rdi, rsi, rdx, rcx, r8, r9. 当参数 ...

  10. dotnet C# 给结构体字段赋值非线程安全

    在 dotnet 运行时中,给引用对象进行赋值替换的时候,是线程安全的.给结构体对象赋值,如果此结构体是某个类的成员字段,那么此赋值不一定是线程安全的.是否线程安全,取决于结构体的大小,取决于此结构体 ...