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. Walkthrough: Create and use your own Dynamic Link Library (C++)

    参考网站:https://docs.microsoft.com/en-us/cpp/build/walkthrough-creating-and-using-a-dynamic-link-librar ...

  2. C++指向函数的指针数组

    可以定义一个指针,指向一个函数,还 可以定义一个指向函数的指针数组,每个元素都是一个指向函数的指针,不过,它们指向的函数的格式都是相同的. 代码如下 //指向函数的指针数组 #include<i ...

  3. WPF Grid新增框选功能

    有时候会有框选的需求,类似EXCEL一样,画一个框选择里面的子控件. 选择后比如可以将子控件的Border设置为红色边框 说下这个功能的大致原理.背景是一个Grid,比如里面放了很多的Button.  ...

  4. spring boot 2.0.0 + shiro + redis实现前后端分离的项目

    简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大 ...

  5. IO流（File类--递归--过滤器--IO字节流--IO字符流--Properties集合--缓冲流--转换流--序列化流--打印流）

    一.File类 1.1概述 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 1.1.1相对路径与绝对路径 相对路径从盘符开始的路径,这是一个完整 ...

  6. css写法

    id选择器 > 类选择器 > 标签选择器 @charset "utf-8"; charset=utf-8   表示当前文档的字符集是采用utf-8的字符,也就是我们常说 ...

  7. 【Office Excel】vlookup函数的反向查找实例教程，不只是正向查找，还可以反向查找，实例讲解

    VLOOKUP 反向查询 众所周知,vlookup只能从左向右查找,而不能从右至左的反向查找.为此高手们设计了一个让无数新手迷惑的公式.今天优爱酷将彻底帮同学们解开这个迷团. [例]如下图所示要求根据 ...

  8. 性能测试工具JMeter 基础（二）—— 主界面介绍

    主界面介绍 JMeter的主界面主要分为菜单导航栏.工具栏.计划树标签栏.内容栏 菜单导航栏:全部的功能的都包含在菜单栏中 工具栏:相当于菜单栏常用功能的快捷按钮 计划树标签栏:显示测试用例(计划)相 ...

  9. K8S——Pod

    一.Pod概念 二.Pod存在的意义 三.Pod的实现机制 四.Pod镜像拉取策略 五.Pod资源限制 六.Pod重启机制 七.Pod的健康检查 八.Pod调度策略(创建Pod流程)

  10. 多Host情况下IDEA无法启动Tomcat的问题

    学习Java Web,学到将WAR包部署到Tomcat中时,遇到一个问题. 部署WAR包的过程本身没什么问题,把.war文件放在<Tomcat安装目录>/webapps/中,然后修改< ...