定义一个点击事件，获取关键词，传到后台，根据关键词搜索并分页。获取根据关键词分页后的数据，展示到前台。直接替换原来的数据。

//接收当前页

        $page = Request::instance()->param('page');

        //判断当前页

        $page = empty($page)?:$page;

        //统计数据

        $count = Db::table('yun')->count();

        //设置每页条数

        $length = ;

        //获取总页数

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

        //设置偏移量

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

        //接受搜索值

        $search = empty($_POST['search'])?"":$_POST['search'];

        //获取搜索的数据

        $data = Db::table('yun')->where("name","like","%$search%")->limit($limit,$length)->select();

        //将所需要的值都赋值给一个变量

        $arr['search'] = empty($search) ? "" : $search;

        $arr['data'] = $data;

        $arr['home_page'] = ;

        $arr['prev_page'] = $page-<= ?  : $page-;

        $arr['next_page'] = $page+>=$num_page?$num_page:$page+;

        $arr['last_page'] = $num_page;

        return view('show',['list'=>$arr]);
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>展示数据</title>

</head>

<body>

<center>

    <input type="text" id="search" value="{$list.search}">

    <input type="button" value="搜索" onclick="page(1)">

    <table border="">

        <tr >

            <td>ID</td>

            <td>姓名</td>

            <td>年龄</td>

            <td>地址</td>

        </tr>

        {volist name="list.data" id="vo"}

        <tr class="{$vo.id}">

            <td>{$vo.id}</td>

            <td>{$vo.name}</td>

            <td>{$vo.age}</td>

            <td>{$vo.address}</td>

        </tr>

        {/volist}

    </table>

    <input type="hidden" name="page">

    <a href="javascript:void(0);" onclick="page({$list.home_page})">首页</a>

    <a href="javascript:void(0);" onclick="page({$list.prev_page})">上一页</a>

    <a href="javascript:void(0);" onclick="page({$list.next_page})">下一页</a>

    <a href="javascript:void(0);" onclick="page({$list.last_page})">尾页</a>

</center>

</body>

</html>

<script src="/static/js/jquery.js"></script>

<script>

    function page(obj) {

        var search = $("#search").val();

        $.ajax({

            method:"POST",

            url:"{:url('search/show')}?page="+obj,

            data:{

                search:search

            }

        }).done(function(data){

            $("body").html(data);

        });

    }

</script>

jquery+ajax搜索并分页的更多相关文章

  1. jQuery +ajax +json+实现分页

    正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...

  2. 基于Jquery+Ajax+Json+高效分页

    摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

  3. 基于Jquery+Ajax+Json实现分页显示

    1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, ...

  4. jquery+ajax(用ajax.dll)实现无刷新分页

    利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...

  5. Yii 框架ajax搜索分页

    要想实现ajax搜索分页 其实很简单 第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层

  6. jQuery ajax 实现分页 kkpager插件

    代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href=&qu ...

  7. 转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  8. 分享一个手机端好用的jquery ajax分页类

    分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...

  9. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

随机推荐

  1. c# 获取 com 引用真实组件地址

    1.根据guid获取 var clsid = new Guid("63EA2B90-C5A8-46F4-8A6E-2F2436C80003").ToString("B&q ...

  2. supervisor支持python虚拟环境venv

    在项目中使用supervisor时,如何在虚拟环境下启动一直存在些小问题. 比如我要写 Cesi程序的监听,我是手动安装的执行之前 要先加载环境source venv/bin/activate 所以写 ...

  3. Oracle的安装+PL安装+系统变量配好后重启

    服务启动后的样子 第一步安装oracle服务 链接: https://pan.baidu.com/s/1sRu95Vy1arc3gfuH9nH5Wg 提取码: eaxx 复制这段内容后打开百度网盘手机 ...

  4. MySQL 设置root密码报错：mysqladmin: connect to server at 'localhost' failed

    MySQL 设置root密码报错:mysqladmin: connect to server at 'localhost' failed 1.安装完MySQL设置root密码报错如下 [root@vm ...

  5. 解决AndroidStudio引入Jar出现Unable to resolve dependency for ':app@debug/compileClasspath

    今天在做Android项目时遇到一个万脸懵逼的错误,表示没看懂,百度一圈说是被墙啥的 不过最终还是被朕给找到了答案,解决办法如下 点击AndroidStudio左上角 File -> setti ...

  6. 学习Hadoop+Spark大数据巨量分析与机器学习整合开发-windows利用虚拟机实现模拟多节点集群构建

    记录学习<Hadoop+Spark大数据巨量分析与机器学习整合开发>这本书. 第五章 Hadoop Multi Node Cluster windows利用虚拟机实现模拟多节点集群构建 5 ...

  7. WEB 性能优化导图

    看了一下网上对于web性能优化的一些帖子,不是很直观,花了点时间画了一个思维导图. refers: https://segmentfault.com/a/1190000011936772 https: ...

  8. 屏蔽F12审查元素，禁止使用右键菜单

    一.屏蔽F12审查元素 <script type="text/javascript"> document.onkeydown = function() { ) { al ...

  9. CentOS7.4下部署hadoop3.1.1

    CentOS7.4下部署hadoop3.1.1 契机 由于工作原因要部署hadoop的集群,习惯使用最新的稳定版本2018年的时候由于时间紧破部署了2.7.2版本,最新由于又要部署有研究了一下3.x的 ...

  10. python3学习笔记12(变量作用域）

    变量作用域 参考http://www.runoob.com/python3/python3-function.html Python 中,程序的变量并不是在哪个位置都可以访问的,访问权限决定于这个变量 ...