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. git撤销已经push到远程仓库上的代码

    具体方法,git命令:git reset --hard <commit_id>git push origin HEAD --force commit_id可以通过git命令:git log ...

  2. 并发控制--context篇

    目录 1. 前言 2 Context 实现原理 2.1 接口定义 2.1 cancelCtx 2.1.1 Done()接口实现 2.1.2 Err()接口实现 2.1.3 cancel()接口实现 2 ...

  3. 前端下载文档的java工具类

    package com.ry.project.util.commUtil;import freemarker.template.Configuration;import freemarker.temp ...

  4. shell中的引号

    单引号: 所见即所得 原封不动输出 双引号: 与单引号类似 特殊符号进行解析 ( $ $() `` ! ) 无引号: 与双引号类似 支持通配符( {} * ) 反引号: 优先执行 优先执行里面的命令, ...

  5. 20201219 u,v,w

    开考前刚起床,所以一边考一边吃饭,然后整场都很迷... A. u 考场 半天才搞懂"下三角区域"指哪个区域,手模样例确认后打了 \(O(qn^2)\) 的裸暴力,然后就不会做了. ...

  6. Appium自动化（6） - 控件定位工具之uiautomatorviewer 的详细介绍

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 app定位不如web定位那么 ...

  7. 10分钟学会VS NuGet包私有化部署

    前言 我们之前实现了打包发布NuGet,但是发布后的引用是公有的,谁都可以访问,显然这种方式是不可取的. 命令版本:10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(ne ...

  8. Git：git commit时退出报错解决（Error45、Error325）

    Git 报错 在输入git commit编辑注释日志时强制退出git程式,文件会变成只读文件,于是出现下述报错: 解决方法(ERROR45) 我们提交代码的正常操作流程一般是: 输入git commi ...

  9. Fastjson 1.2.22-24 反序列化漏洞分析（1）

    Fastjson 1.2.22-24 反序列化漏洞分析(1) 前言 FastJson是alibaba的一款开源JSON解析库,可用于将Java对象转换为其JSON表示形式,也可以用于将JSON字符串转 ...

  10. vuex前端工程化之动态导入文件--require.context( )

    随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...