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

//接收当前页

        $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. IO文件流

    定义:流是一种抽象的概念,通过流的方式组成无结构字符和字符序列,从流中取数据的操作进行输入输出.[io流的作用就是用流的方式进行输入输出] 常用语法: 1.   首先引用using.system.io ...

  2. PHP之Trait详解

    php从以前到现在一直都是单继承的语言,无法同时从两个基类中继承属性和方法,为了解决这个问题,php出了Trait这个特性 用法:通过在类中使用use 关键字,声明要组合的Trait名称,具体的Tra ...

  3. day01知识点

    1.计算机基础 2.Python的历史 3.编码语言分类     Python是一门动态解释性的强制类型定义语言 4.Python的解释器种类 5.变量     法律规则:字母,数字,下划线(数字不能 ...

  4. Kuberneteser二进制安装与配置（二）

    环境:Centos7 版本:Kubernetes v1.11.4   一.下载Kubernetes   1)下载 wget https://github.com/kubernetes/kubernet ...

  5. tomcat 闪退问题排查

    由于启动tomcat回出现闪退情况,看不到异常 解决方法: 一. 打开startup.bat文件,在最下面 在文本的最后敲上pause,保存后重新运行startup.bat,这时候窗口会留在桌面上(调 ...

  6. ss - linux网络工具

    用以替代netstat 参看 http://www.cnblogs.com/peida/archive/2013/03/11/2953420.html 常用命令: ss -ptl | grep 991 ...

  7. Win7下，nginx默认80端口被System占用，造成nginx启动报错

    在win7 32位旗舰版下,启动1.0.8版本nginx,显示如下错误: 2012/04/02 13:55:59 [emerg] 7864#2376: bind() to 0.0.0.0:80 fai ...

  8. 【C++】关键字inline

    1. 引入inline关键字的原因 在c/c++中,为了解决一些频繁调用的小函数大量消耗栈空间(栈内存)的问题,特别的引入了inline修饰符,表示为内联函数. 栈空间就是指放置程序的局部数据(也就是 ...

  9. docker 快速部署ES集群 spark集群

    1) 拉下来 ES集群  spark集群 两套快速部署环境, 并只用docker跑起来,并保存到私库. 2)弄清楚怎么样打包 linux镜像(或者说制作). 3)试着改一下,让它们跑在集群里面. 4) ...

  10. JavaScript 环境和作用域

    作用域 1. 全局环境 window: JS的全局执行环境,顶层对象.this指针在全局执行环境时就指向window. console.log(this===window); //true 2. 局部 ...