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. 查看node.js全局安装的插件路径

    查看 npm  全局插件 默认全局安装路径 参考:https://www.jianshu.com/p/f2873fcef5aa 首先 nodejs安装好之后,默认情况下会有如下配置 npm confi ...

  2. The Programmer's Oath程序员的誓言----鲍勃·马丁大叔（Bob Martin）

    In order to defend and preserve the honor of the profession of computer programmers, I Promise that, ...

  3. mzy git学习，分支冲突，以及冲突解决(五)

    冲突解决: 先尝试制造冲突: 首先我:git checkout -b mzy 创建一个mzy的分支 然后在其中修改readme.txt文件,随便加上一点东西. vim readme.txt   wri ...

  4. C++类和对象笔记

    笔记参考C++视频课程 黑马C++ C++ 面向对象的三大特性:封装.继承.多态 目录 目录 目录 一.封装 1.1 封装的意义-属性和行为 1.2 struct和class的区别 1.3 成员属性设 ...

  5. JDBC分页查询及实现

    当数据过多时,一页之内是无法显示的,因此需要进行分页显示. (一)分页技术实现: 物理分页: - 在数据库执行查询时(实现分页查询),查询需要的数据--依赖数据库的SQL语句 - 在sql查询时,从数 ...

  6. 理解ASP.NET Core - [03] Dependency Injection

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 依赖注入 什么是依赖注入 简单说,就是将对象的创建和销毁工作交给DI容器来进行,调用方只需要接 ...

  7. Redis-技术专区-让你彻底会使用“Redis中最陌生且最强大的集合”（ZSET）【前篇】

    前言介绍 很多小伙伴都跟我说,redis中,ZSet(有序集合)是他们最陌生的集合,同时也是觉得特别复杂的集合之一,在开发过程中经常会用到它,而且也是大家最不太有把握使用的集合,所以笔者就从ZSet集 ...

  8. Qt中的Q_PROPERTY宏浅析

    1. Q_PROPERTY Qt提供了一个绝妙的属性系统,Q_PROPERTY()是一个宏,用来在一个类中声明一个属性property,由于该宏是qt特有的,需要用moc进行编译,故必须继承于QObj ...

  9. Java HashMap工作原理：不仅仅是HashMap

    前言: 几乎所有java程序员都用过hashMap,但会用不一定会说. 近年来hashMap是非常常见的面试题,如何为自己的回答加分?需要从理解开始. "你用过hashMap吗?" ...

  10. 性能测试工具JMeter 基础（五）—— 测试元件： 测试计划

    测试计划的定义: 测试计划是测试脚本的容器,定义了要执行什么.怎么执行对测试做总体的设置,且都是从线程组开始执行 在测试计划中可自定义用户变量(User Defined Variables),可通过A ...