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. CLR、CLI、CTS、CLS的关系

    网站:https://blog.csdn.net/dodream/article/details/4719578 ·CLR(公共语言运行库)是一个CLI的实现,包含了.NET运行引擎和符合CLI的类库 ...

  2. vue爬坑之路1-路由跳转全新页面以及二级页面配置

    之前也在网找了一些答案,比较零碎,特此总结下,废话不多说,直接上干货! 路由跳转全新页面 首先在app.vue中先定义router-view,这是主路由. 在router的index.js中引入log ...

  3. linux 常用命令(一)——查看硬盘空间-内存-线程的cpu负载-线程内存

    系统参数检查: df -h [enter] 检查硬盘空间 TIP: 使用 man df 可查看该命令使用说明 ; q 退出. free检查内存使用情况: free [enter] TIP: 使用 ma ...

  4. linux0.01内核源码结构

    目录 boot 系统引导. fs 文件系统. include 头文件.一些C标准库,系统核心库. init 入口.main.c. kernel 内核. lib 库.C源程序,一些基本核心的程序. mm ...

  5. 搞懂Redis协议RESP

    RESP (REdis Serialization Protocal) Redis客户端和服务端之间通信的协议.它很简单,建立在TCP协议上,提供简单.高性能.可读性强的数据序列化的规范和语义. 5种 ...

  6. 面试必问题：JS防抖与节流

    摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...

  7. Ubuntu16.04 Linux 下无痛安装、配置Gogs

    本文在Win7+VMware的ubuntu 16.04中测试,安装Gogs,Install from binary. 准备工作: sudo apt-get install git sudo addus ...

  8. 阿里云服务器部署mongodb

    在阿里云上买了个服务器,部署mongodb遇到一些坑,解决办法也是从网上搜集而来,把零零碎碎的整理记录一下. 服务器是:Alibaba Cloud Linux 下载安装 mongodb官网下载实在是太 ...

  9. 使用 & 进行高效率取余运算

    Java的HashMap源码中用到的(n-1)&hash这样的运算,这是一种高效的求余数的方法 结论:假设被除数是x,对于除数是2n的取余操作x%2n,都可以写成x&(2n-1),位运 ...

  10. Appium问题解决方案（5）- selenium.common.exceptions.InvalidSelectorException: Message: Locator Strategy 'name' is not supported for this session

    背景 使用Appium Server 1.15.1版本 执行了以下脚本 test = driver.find_element_by_name("自动化测试") print(test ...