2. 程式人生 > >Ajax實現搜尋功能的分頁

Ajax實現搜尋功能的分頁

阿新 • • 發佈：2018-12-31
//清空最大頁和當前頁，保證能夠多次搜尋 function on() { $('#pageCurrent').val(''); $('#maxys').val(''); } //首頁 function pageAjaxFirst() { $('#pageCurrent').val(1); searchResult(); } //尾頁 function pageAjaxEnd() { var maxys = $('#maxys').val(); $('#pageCurrent'
).val(maxys); searchResult(); } //下一頁 function pageAjaxNext() { var maxys = $('#maxys').val(); var page = $('#pageCurrent').val(); $('#pageCurrent').val(parseInt(page) +1); if (page > maxys) { $('#pageCurrent').val(maxys); } searchResult(); } //上一頁
function pageAjaxPrev() { var maxys = $('#maxys').val(); var page = $('#pageCurrent').val(); $('#pageCurrent').val(parseInt(page) -1); if (page < 1) { $('#pageCurrent').val(1); } searchResult(); } //跳轉頁面 function tiao
() { var maxys = $('#maxys').val(); var now = $('#pageTiao').val(); $('#pageCurrent').val(now); var page = $('#pageCurrent').val(); if (page < 1) { $('#pageCurrent').val(1); } if (page > maxys) { $('#pageCurrent').val(maxys); } searchResult(); } function searchResult() { var formData = $("#myPost").serialize(); var caption = $("#caption"); var html = ''; $('#pageBar').remove(); $.ajax({ type:"get", url:"/user/search/do_search", data:formData, success:success, error: fail }); function fail() { alert('查詢條件有誤。') } function success(search){ if (search != null) { var obj = JSON.parse(search); var content = obj[0]; var nowPage = obj[1]; var total1 = obj[2]; var allPage = obj[4]; $.each(content, function (key, value) { html += '<tr class="sousuo"><td class="chk"><input value="" val="' + content[key]['user_id'] + '" type="checkbox" name="CheckBox[' + content[key]['user_id'] + ']" class="check-box" /></td> <td class="txt40 c">' + content[key]['user_id'] + '</td><td class="txt40 c"><a href="/user/user/user_info/user_id/' + content[key]['user_id'] +'"' + '"title="檢視資料">'+ content[key]['account'] + '</a></td>' + '<td class="txt40 c">' + content[key]['nickname']+ '</td><td class="txt40 c">' + content[key]['sex'] + '</td><td class="txt80 c">' + content[key]['coin'] + '</td><td class="txt40 c">' + content[key]['tickets'] + '</td><td class="txt40 c">' + content[key]['gem'] + '</td><td class="txt40 c">VIP' + content[key]['vip_id'] + '</td><td class="txt40 c">' + content[key]['user_type'] + '</td> <td class="txt80 c">' + content[key]['register_platform'] + ' </td> <td class="txt80 c">' + content[key]['register_date'] + '</td> <td class="txt80 c">'+content[key]['last_login_time']　+ '</td><td class="txt80 c">'+ content[key]['last_login_ip'] + '</td> <td class="txt80 c">'+ content[key]['game_login_times'] +'</td><td class="txt80 c">'+ content[key]['prohibit_flag'] + '</td><td class="icon"><a class="opt" title="編輯" href="/user/user/edit_user/user_id/' + content[key]['user_id'] + '}"><span class="icon-sprite icon-edit"></span></a></td></tr>'; }); $('.showTr').remove(); $('.sousuo').remove(); $('.xiaoshi').remove(); $('.show').after(html); $('#maxys').val(allPage); $('#pageCurrent').val(nowPage); } else { $('.show').after('<tr>沒有資料</tr>'); } $('#fenye').css('display','block'); $('#pageAjax').html('頁次：'+ nowPage + '/' + allPage +'每頁22總數' + total1); } }

相關推薦

Ajax實現搜尋功能的分頁

//清空最大頁和當前頁，保證能夠多次搜尋 function on() { $('#pageCurrent').val(''); $('#maxys').val(''); } //首頁 function pageAjaxFirs

ssm和Ajax實現後端分頁

後臺實現程式碼如下： @RequestMapping(value = { "/orderselect" })     public @ResponseBody Map<String, Object> queryorder(HttpServletRequest r

javascript專案實戰---ajax實現無重新整理分頁

<?php class Pagination { private $total; //資料表中總記錄數 private $listRows; //每頁顯示行數 private $limit; //mysql 資料庫的limit private $uri; //分頁

asp.net mvc基於jQuery+Ajax實現無重新整理分頁

解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。後端控制器處理完後利用PartialView方法把資料返回到分部檢視中，利用

SSH三大框架的整合+利用Ajax實現無重新整理分頁

以下是我利用Struts2.3.24、Spring4.0、Hibernate4.2 結合Mysql資料庫進行的ssh整合，實現分頁需要json.js 首先ssh的整合需要匯入所有的jar包 在web.xml <?xml version="1.0" e

Django 實現搜尋功能、分頁功能和個人理解

最近在研究django的功能，分頁功能根據官方文件可以簡單的實現，但是如果配合上搜尋，對搜尋結果分頁就要稍微費點周折。 話不多少，先上程式碼。 一、搜尋配合分頁 # 獲取、判斷並封裝關keyword鍵搜尋 kw = request.GET.get("keyword",

thymeleaf實現簡單的條件搜尋並分頁搜尋功能

首先看一下模板： 大致就是可以通過上面的某個或者多個條件實現按條件分頁搜尋的功能。因為前端介面用的是HTML並沒有用jsp所以沒辦法使用c：標籤，那麼怎麼通過thymeleaf實現jsp的功能呢？ 好吧看一下程式碼： <form th:action="@{/per

Django中使用JS通過DataTable實現表格前端分頁，每頁顯示頁數，搜尋等功能

版本： django：2.1.7 python：3.7 Django架構中自帶了後端分頁的技術，通過Paginator進行分頁，前端點選按鈕提交後臺進行頁面切換。 優缺點：後端分頁對於資料量大的場景有其優勢，但頁面切換比較慢。 後端分頁python3程式碼如下： paginator = Pag

poscms基於list標簽實現的查詢分頁功能

span utf 我們 cms rtti png bsp 控制 start poscms系統本身有一個在查詢頁（search頁面）實現的查詢分頁功能，基於系統封裝的php函數dr_search_url() 但是今天的需求除了導航欄、列表頁、詳情頁都實現查詢功能外，關鍵是有

MyBatis分頁功能的實現（陣列分頁、sql分頁、攔截器，RowBounds分頁）

前言：學習hibernate & mybatis等持久層框架的時候，不外乎對資料庫的增刪改查操作。而使用最多的當是資料庫的查詢操

tp5+ajax+jq實現無重新整理分頁

tp5框架裡面自帶有panigate()+rende()的方法可以超簡單的實現分頁，但是就是看著一直要重新整理很不爽，所以找了網上的好多程式碼，終於找到了一個邏輯簡單的無重新整理分頁，以下是我更改適合之後實現的效果 程式碼裡面有詳細註釋了，就不多說了，說明一下分頁查詢的原

ASP.NET+Ajax+JQuey+Json資料+儲存過程實現無重新整理分頁

<!--引入jquery-1.6.2--> <!--ShowPageData1.aspx頁面--> <script src="../Jquery/jquery-1.6.2.min.js" type="text/javascript">&l

asp.net Mvc4 使用ajax結合分頁外掛實現無重新整理分頁

本文為在mvc4中使用ajax實現無重新整理分頁demo，記錄一下。 解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。

js實現資料載入分頁功能的實現（通用）

html: <div class="tishi"></div> <table id="dataList" class="table table-bordered text-center" style=""> &

實現FreeMarker+Ajax的無重新整理分頁

目前已經使用SpringBoot+MyBatis+PageHelper實現了物理分頁. 現在想通過Ajax實現FreeMarker的無重新整理分頁. 我的理解是最關鍵的地方在於如何替換FreeMarker中的標籤的值. 只要解決了這一點, 就可以輕鬆解決資料回顯和分頁出現的

vue2.0巢狀路由實現豆瓣電影分頁功能(附加豆瓣web-app)

前言 最近練習Vue，看到官方文件中的巢狀路由， 不做不知道，實在是太坑了，網上資料demo少之又少，然後自己就做了一個demo,用了vue2.0巢狀路由實現豆瓣電影分頁功能，供大家學習學習，寫得不好望見諒。 demo截圖： douban.gif Demo

DevExpress中實現GridControl的分頁功能

cor 只需要 列表 lastindex aso ont ram data span DevExpress中如何實現GridControl的分頁功能 簡介:DevExpress中如何實現GridControl的分頁功能, 主要是利用DataNavig

JSP實現 留言板 分頁顯示，新留言顯示在第一個~

date() sdf style string hid pre || lan pat 頁面效果圖： 留言Servlet-----MessageServlet package cn.MuJH.newsManager.servlet; import java.io.

SpringMVC+Mybatis實現的Mysql分頁數據查詢

space round nbsp sub hid append app return utf 　　周末這天手癢，正好沒事幹，想著寫一個分頁的例子出來給大家分享一下。 　　這個案例分前端和後臺兩部分，前端使用面向對象的方式寫的，裏面用到了一些回調函數和事件代理，有興趣的朋友可

【原】無腦操作：IDEA + maven + SpringBoot + JPA + Thymeleaf實現CRUD及分頁

xtend sla lns ase tid item pen element per 一、開發環境： 1、windows 7 企業版 2、IDEA 14 3、JDK 1.8 4、Maven 3.5.2 5、MariaDB 6、SQLYog 二、Maven設