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

//接收当前页

        $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. Spring.factories扩展机制

    和Java SPI的扩展机制类似,Spring Boot采用了spring.factories的扩展机制,在很多spring的starter 包中都可以找到,通过在 META-INF/spring.f ...

  2. Python图片裁剪

    我们使用的是Image中的crop(box)功能,它需要一个参数box,元组 类型,元组包括4个元素,如:(距离图片左边界距离x, 距离图片上边界距离y,距离图片左边界距离+裁剪框宽度x+w,距离图片 ...

  3. myEclipse+Spring boot+Hbuilder+jwt Token+mongoDB+企业微信H5开发

    企业微信应用的H5开发 1.参考文档:weUI:http://jqweui.com/ 2.企业微信接口文档:https://work.weixin.qq.com/api/doc#10029 3.百度地 ...

  4. html5/h5课件如何制作？

    随着flash逐渐被html5取代,很多教育机构都在面临着如何将自己的flash交互课件产品转换到html5版本的问题,最近遇到非常多的客户一上来就问我,flash课件能直接转成Html5课件么?答案 ...

  5. Azure CosmosDB (13) CosmosDB数据建模

    <Windows Azure Platform 系列文章目录> 我们在使用NoSQL的时候,如Azure Cosmos DB,可以非常快速的查询非结构化,或半结构化的数据.我们需要花一些时 ...

  6. 安卓APP环境搭建

    https://www.cocos.com/creator 下载2.0.8 安装的时候选择原生环境 下载SDK:http://tools.android-studio.org/index.php/sd ...

  7. MySQL 5.7版本 sql_mode=only_full_group_by 问题

    具体错误: SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in ...

  8. python 代理的使用

    这里分享一个测试ip的网址     http://ip.filefab.com/index.php scrapy 随机请求头和代理ip的使用原理 import random # 添加一个中间键 cla ...

  9. 2018-2019-2 20165312《网络攻防技术》Exp3 免杀原理与实践

    2018-2019-2 20165312<网络攻防技术>Exp3 免杀原理与实践 课上知识点总结 1.恶意软件检测机制 基于特征码的检测(需要定期更新病毒库) 启发式恶意软件检测(实时监控 ...

  10. ocr_vote disk损坏恢复

    1. 检查votedisk和 ocr备份[root@rh6rac1 bin]./ocrconfig -showbackuprh6rac1     2019/03/19 16:57:40     /or ...