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

//接收当前页

        $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. javaEE REST 基于第三方框架Restlet

    郭晨 软件151 1531610114 1.修改web.xml文件 添加URL模式(<url-pattern>)到Servlet的映射关系 设置Servlet的初始化参数(<init ...

  2. python中使用if __name__ == '__main__':

    引子 在python中,假设在一个test1.py的模块中定义了一个foo函数,然后调用函数foo进行测试的时候会产生一个内存空间.当你把这个模块导入到test2.py模块中,接下来如果在test2. ...

  3. 2018-2019-2 网络对抗技术 20165308 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165308 Exp4 恶意代码分析 实验过程 一.系统运行监控 (1)使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一 ...

  4. python selenium-webdriver 定位frame中的元素 （十三）

    定位元素时经常会出现定位不到元素,这时候我们需要观察标签的上下文,一般情况下这些定位不到的元素存放在了frame或者放到窗口了,只要我们切入进去就可以很容易定位到元素. 处理frame时主要使用到sw ...

  5. 分布式事务（二）Java事务API(JTA)规范

    一.引子 既然出现了分布式场景(DTP模型), 大java也及时制定出一套规范来给各大应用服务器.数据库/mq等厂商使用,以方便管理互通--->JTA闪亮登场.JTA(Java Transact ...

  6. UnicodeEncodeError: 'ascii' codec can't encode characters in position 1-5: ordinal not in range(128)

    原因是pip安装python包会加载我的用户目录,我的用户目录恰好是中文的,ascii不能编码.解决办法是: python目录 Python27\Lib\site-packages 建一个文件site ...

  7. .net core2.0获取host的方法

    Example there's an given url: http://localhost:4800/account/login 获取整个url地址: 在页面(cstml)中 Microsoft.A ...

  8. 一个极其简易版的vue.js实现

    前言 之前项目中一直在用vue,也边做边学摸滚打爬了近一年.对一些基础原理性的东西有过了解,但是不深入,例如面试经常问的vue的响应式原理,可能大多数人都能答出来Object.defineProper ...

  9. Mxd文档更新比例尺

    在AE中,更新Mxd文档的比例尺,比较特殊.写代码以记录,更新比例尺代码如图所示: [DllImport("User32.dll")] public static extern i ...

  10. 动态调用WebService的代理类

    using System; using System.Collections; using System.ComponentModel; using System.Data; using System ...