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

  1. //接收当前页
  2.         $page = Request::instance()->param('page');
  3.         //判断当前页
  4.         $page = empty($page)?:$page;
  5.         //统计数据
  6.         $count = Db::table('yun')->count();
  7.         //设置每页条数
  8.         $length = ;
  9.         //获取总页数
  10.         $num_page = ceil($count/$length);
  11.         //设置偏移量
  12.         $limit = ($page-)*$length;
  13.         //接受搜索值
  14.         $search = empty($_POST['search'])?"":$_POST['search'];
  15.         //获取搜索的数据
  16.         $data = Db::table('yun')->where("name","like","%$search%")->limit($limit,$length)->select();
  17.         //将所需要的值都赋值给一个变量
  18.         $arr['search'] = empty($search) ? "" : $search;
  19.         $arr['data'] = $data;
  20.         $arr['home_page'] = ;
  21.         $arr['prev_page'] = $page-<= ?  : $page-;
  22.         $arr['next_page'] = $page+>=$num_page?$num_page:$page+;
  23.         $arr['last_page'] = $num_page;
  24.         return view('show',['list'=>$arr]);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>展示数据</title>
  6. </head>
  7. <body>
  8. <center>
  9.     <input type="text" id="search" value="{$list.search}">
  10.     <input type="button" value="搜索" onclick="page(1)">
  11.     <table border="">
  12.         <tr >
  13.             <td>ID</td>
  14.             <td>姓名</td>
  15.             <td>年龄</td>
  16.             <td>地址</td>
  17.         </tr>
  18.         {volist name="list.data" id="vo"}
  19.         <tr class="{$vo.id}">
  20.             <td>{$vo.id}</td>
  21.             <td>{$vo.name}</td>
  22.             <td>{$vo.age}</td>
  23.             <td>{$vo.address}</td>
  24.         </tr>
  25.         {/volist}
  26.     </table>
  27.     <input type="hidden" name="page">
  28.     <a href="javascript:void(0);" onclick="page({$list.home_page})">首页</a>
  29.     <a href="javascript:void(0);" onclick="page({$list.prev_page})">上一页</a>
  30.     <a href="javascript:void(0);" onclick="page({$list.next_page})">下一页</a>
  31.     <a href="javascript:void(0);" onclick="page({$list.last_page})">尾页</a>
  32. </center>
  33. </body>
  34. </html>
  35. <script src="/static/js/jquery.js"></script>
  36. <script>
  37.     function page(obj) {
  38.         var search = $("#search").val();
  39.         $.ajax({
  40.             method:"POST",
  41.             url:"{:url('search/show')}?page="+obj,
  42.             data:{
  43.                 search:search
  44.             }
  45.         }).done(function(data){
  46.             $("body").html(data);
  47.         });
  48.     }
  49. </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++中函数指针作为int传递

    int f() { ; } typedef int (*method)(); int _tmain(int argc, _TCHAR* argv[]) { int value = (int)& ...

  2. 使用nginx mirror 制作nexus 的简单ha

      主要是运行两台nexus 机器,通过nexus 的host 以及proxy 以及public 模型,结合nginx 的mirror 将对于host 的get 请求 mirror 到另一台机器pro ...

  3. Yii2 设计模式——静态工厂模式

    应用举例 yii\db\ActiveRecord //获取 Connection 实例 public static function getDb() { return Yii::$app->ge ...

  4. Yii2 设计模式——设计模式简介

    我们首先来思考一个问题:作为工程师,我们的价值是什么? 笔者认为是——解决用户问题. 我们的任何知识和技能,如果不能解决特定的问题,那么就是无用的屠龙之术:我们的任何经验,如果不能对解决新的问题有用, ...

  5. 2018-2019-2 20165308网络对抗技术 Exp6：信息收集与漏洞扫描

    2018-2019-2 20165308网络对抗技术 Exp6:信息收集与漏洞扫描 实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册 ...

  6. Python图片裁剪

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

  7. django ORM多对多操作

    创建多对多: 方式一:自定义关系表 class Host(models.Model): nid = models.AutoField(primary_key=True) hostname = mode ...

  8. Kettle解决方案: 第五章 ETL相关知识

    早期, ETL知识作为BI系统的一部分来介绍. 后来在The Data Warehouse ETL Tooket一书中, 系统性的整理了ETL的相关内容, 形成了一篇"ETL里的34个子系统 ...

  9. Notepad2用法说明

    Notepad2用法说明:1.替换系统记事本.bat和恢复系统记事本.bat可以替换.回复系统记事本.2.查看→默认字体,编程可用Consolas,字号四号.3.查看→自定义方案,Identifier ...

  10. 报错：Flink Could not resolve substitution to a value: ${akka.stream.materializer}

    报错现象: Exception in thread "main" com.typesafe.config.ConfigException$UnresolvedSubstitutio ...