關於Ajax無重新整理分頁技術的一些研究 c#
小弟新手，求大神有更好的解決方案，指教下~
以前做專案，用過GridView的重新整理分頁，也用過EasyUI的封裝好的分頁技術，最近在老專案的基礎上加新功能，迫於需求，自己沒事琢磨了個Ajax無重新整理分頁技術，
也在百度看了下， 寫的都不是很系統，在這裡寫個系統的，簡單的，方便大家研究下。
系統支援 和資料庫互動的無重新整理分頁、刪除後的 當前頁 定位、在查詢條件下的 分頁 ,有資料，顯示刪除，列表，沒有隻顯示新增按鈕。
專案採取的後臺拼html，圖了個簡單，方便區分分頁js，在後臺寫html，增加伺服器壓力，第一選擇還是傳JSON哈，謝謝樓下大神回答。
我寫的這個無重新整理分頁用的最重要的sql 語句就是
sql = @"select * from (select ROW_NUMBER() over (ORDER BY CREATEDATE) rownum,a.goodsid,a.goodsname,a.itemname,a.price FROM GoodsOrderAccept a " + selectsql + ") t where t.rownum>='" + ((page - 1) * 10 + 1) + "' and t.rownum<='" + page * 10 + "'";
相信有些大神，看到這裡，已經知道我採取的什麼方法了，重點就是 ROW_NUMBER()，利用它和Page變數，從前臺頁面請求不同的頁碼，顯示不同的資料。
下面看一下專案的目錄結構：
List.aspx就是頁面，Page.ashx就是實現的分頁技術，JSONObject.cs在後臺對JSON序列化成物件。
List.aspx頁面執行如下：
如頁面所示，支援checkbox，單刪除，多刪除.
下面開始貼程式碼：
List.aspx頁面程式碼如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="AjaxPage.List" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 7 <title>分頁功能演示</title> 8 <script type="text/javascript"> 9 $(function () { 10 11 //初始化首頁資料以及各種變數 12 $.ajax({ 13 type: "POST", 14 url: "Page.ashx", 15 dataType: "json", 16 data: { 17 action: "getFirstPageAndVariable" 18 }, 19 success: function (data) { 20 if (data.outStr != "" && data.pagecount != "0") { 21 //有資料載入資料列表，顯示資料列表，顯示刪除按鈕，以及分頁按鈕 22 document.getElementById('btn_delete').style.display = ""; 23 document.getElementById('div_list').style.display = ""; 24 document.getElementById('div_page').style.display = ""; 25 $("#tbody_list").empty(); 26 $("#tbody_list").append(data.outStr); 27 //把總頁數賦值給變數 28 $('#<%=hid_last.ClientID %>').val(data.pagecount); 29 //初始化頁數輸入框 30 $("#text_page").val($('#<%=hid_shou.ClientID %>').val()); 31 //將上一頁和下一頁變數賦值為首頁變數 32 $('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val()); 33 } 34 } 35 }); 36 //繫結按鈕事件 37 $("#btn_search").bind("click", btn_search); 38 $("#btn_delete").bind("click", btn_delete); 39 //查詢事件 40 function btn_search(event) { 41 42 //查詢輸入框不為空的話，才執行查詢事件 43 //if ($("#text_search").val().toString().replace(/[ ]/g, "") != "") { 44 $.ajax({ 45 type: "POST", 46 url: "Page.ashx", 47 dataType: "json", 48 data: { 49 action: "getFirstPageAndVariable", 50 search: $("#text_search").val() 51 }, 52 success: function (data) { 53 if (data.outStr != "" && data.pagecount != "0") { 54 //有資料載入資料列表，顯示資料列表，顯示刪除按鈕，以及分頁按鈕 55 document.getElementById('btn_delete').style.display = ""; 56 document.getElementById('div_list').style.display = ""; 57 document.getElementById('div_page').style.display = ""; 58 $("#tbody_list").empty(); 59 $("#tbody_list").append(data.outStr); 60 //把總頁數賦值給變數 61 $('#<%=hid_last.ClientID %>').val(data.pagecount); 62 //初始化頁數輸入框 63 $("#text_page").val($('#<%=hid_shou.ClientID %>').val()); 64 //模糊查詢後，將上一頁和下一頁變數賦值為首頁變數 65 $('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val()); 66 } 67 } 68 }); 69 //} 70 } 71 //刪除事件 72 function btn_delete(event) { 73 var deleteData = ""; 74 $("#tbody_list tr").each(function () { 75 if ($($(this).children().get(0)).find("input")[0].status) { 76 deleteData += $($(this).children().get(0)).find("input")[0].value + "," + $($(this).children().get(0)).find("input")[0].value + "|"; 77 } 78 }); 79 if (deleteData == "") { 80 alert("不能提交空資料！"); 81 return false; 82 } 83 if (!confirm("確定要刪除嗎？")) { 84 return false; 85 } 86 $.ajax({ 87 type: "POST", 88 url: "Page.ashx", 89 dataType: "json", 90 data: { 91 action: "deleteData", 92 deleteData: deleteData 93 }, 94 success: function (data) { 95 if (data.status == "success") { 96 //初始化當前頁資料以及各種變數 97 $.ajax({ 98 type: "POST", 99 url: "Page.ashx", 100 dataType: "json", 101 data: { 102 action: "getDeletePageAndVariable", 103 hid_change: $('#<%=hid_change.ClientID %>').val(), 104 search: $("#text_search").val() 105 }, 106 success: function (data) { 107 if (data.pagecount != "0") { 108 $("#tbody_list").empty(); 109 $("#tbody_list").append(data.outStr); 110 //把總頁數賦值給變數 111 $('#<%=hid_last.ClientID %>').val(data.pagecount); 112 //初始化頁數輸入框 113 $("#text_page").val(data.hid_change); 114 //將上一頁和下一頁變數賦值為首頁變數 115 $('#<%=hid_change.ClientID %>').val(data.hid_change); 116 } 117 } 118 }); 119 } 120 } 121 }); 122 } 123 //載入首頁點選事件 124 $("#a_shou").click(function () { 125 $.ajax({ 126 type: "POST", 127 url: "Page.ashx", 128 dataType: "json", 129 data: { 130 action: "clickPageAndGetData", 131 page: $('#<%=hid_shou.ClientID %>').val(), 132 search: $("#text_search").val() 133 }, 134 success: function (data) { 135 if (data.outStr != "") { 136 $("#tbody_list").empty(); 137 $("#tbody_list").append(data.outStr); 138 $("#text_page").val($('#<%=hid_shou.ClientID %>').val()); 139 //將上一頁和下一頁的變數賦值為首頁變數 140 $('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val()); 141 } 142 } 143 }); 144 }); 145 //載入末頁點選事件 146 $("#a_last").click(function () { 147 $.ajax({ 148 type: "POST", 149 url: "Page.ashx", 150 dataType: "json", 151 data: { 152 action: "clickPageAndGetData", 153 page: $('#<%=hid_last.ClientID %>').val(), 154 search: $("#text_search").val() 155 }, 156 success: function (data) { 157 if (data.outStr != "") { 158 $("#tbody_list").empty(); 159 $("#tbody_list").append(data.outStr); 160 $("#text_page").val($('#<%=hid_last.ClientID %>').val()); 161 //將上一頁和下一頁的變數賦值為首頁變數 162 $('#<%=hid_change.ClientID %>').val($('#<%=hid_last.ClientID %>').val()); 163 } 164 } 165 }); 166 }); 167 //載入上一頁點選事件 168 $("#a_back").click(function () { 169 //當前頁面為首頁時，無上一頁事件 170 var back = parseInt($('#<%=hid_change.ClientID %>').val()) - 1; 171 if (back != 0) { 172 $.ajax({ 173 type: "POST", 174 url: "Page.ashx", 175 dataType: "json", 176 data: { 177 action: "clickPageAndGetData", 178 page: back, 179 search: $("#text_search").val() 180 }, 181 success: function (data) { 182 if (data.outStr != "") { 183 $("#tbody_list").empty(); 184 $("#tbody_list").append(data.outStr); 185 $('#<%=hid_change.ClientID %>').val(back); 186 $("#text_page").val(back); 187 } 188 } 189 }); 190相關推薦
關於Ajax無重新整理分頁技術的一些研究 c#
小弟新手，求大神有更好的解決方案，指教下~ 以前做專案，用過GridView的重新整理分頁，也用過EasyUI的封裝好的分頁技術，最近在老專案的基礎上加新功能，迫於需求，自己沒事琢磨了個Ajax無重新整理分頁技術， 也在百度看了下， 寫的都不是很系統，在這裡寫個系統的，簡單的，方便大家研究下。 系統支
淺談TP5的ajax無重新整理分頁
簡單說一下如何進行TP5的ajax無重新整理分頁吧，這個功能實現的方法有千百種，或許我提供的這一種並不是最好的，但確實是很實用的。 以下的例子會使用TP5自帶的分頁類來實現，無任何修改。 首先來一段後臺查詢資料的程式碼，查詢出相關的資料 $list = Load
Laravel 5.1之Ajax無重新整理分頁
ajax無重新整理分頁的優點： 1、區域性重新整理 減輕壓力 2、美觀 提高使用者體驗 php程式碼： /* @Laravel框架 @Ajax無重新整理分頁(簡單7步驟) */ public fu
jquery.page.js實現ajax無重新整理分頁
http://blog.csdn.net/dengboblog/article/details/52699332 寫程式碼參考了這位大神的部落格。下面貼上我的程式碼。 首先是要把引入的分頁js和css新增進來。這個程式碼自己百度吧。 $.ajax({ type
laravel之ajax無重新整理分頁
ajax無重新整理分頁的優點： 1、區域性重新整理 減輕壓力 2、美觀 提高使用者體驗 php程式碼： /* @Laravel框架 @Ajax無重新整理分頁(簡單7步驟) */ public function page() { //1、查詢資料庫總條數 $count = count(Db::table(
ajax無重新整理分頁實現 帶例項呦
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePat
Bootstrap V3.0 Ajax無重新整理分頁的實現 附程式碼
/** * Created by wangpai on 2015/11/3. */ var cnf_id = 0; var total=0; var tuple_num=15; var offset=0; var now=1; //pageAjax後更新now var pre=1; var next=1
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
javascript專案實戰---ajax實現無重新整理分頁
<?php class Pagination { private $total; //資料表中總記錄數 private $listRows; //每頁顯示行數 private $limit; //mysql 資料庫的limit private $uri; //分頁
asp.net Mvc4 使用ajax結合分頁外掛實現無重新整理分頁
本文為在mvc4中使用ajax實現無重新整理分頁demo，記錄一下。 解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。
Ajax+php+jquery無重新整理分頁處理
日常醬油.....如下動圖:主要解決的問題如下:1.使用PDO連線資料庫2.PDO::query 執行SQL語句,返回PDOStatement物件,可以理解為結果集3.PDOStatement::fetchColumn 從結果集中的下一行返回單獨的一列 4.ceil()
asp.net mvc基於jQuery+Ajax實現無重新整理分頁
解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。後端控制器處理完後利用PartialView方法把資料返回到分部檢視中，利用
Jquery+ajax+PHP 基於thinkPHP的無重新整理分頁
var page_cur = 1; //當前頁 var total_num, page_size, page_total_num;//定義總記錄數,每頁條數,總頁數 function getData(page) { //獲取當前頁資料 var w = document.getElementById("
SSH三大框架的整合+利用Ajax實現無重新整理分頁
以下是我利用Struts2.3.24、Spring4.0、Hibernate4.2 結合Mysql資料庫進行的ssh整合，實現分頁需要json.js 首先ssh的整合需要匯入所有的jar包 在web.xml <?xml version="1.0" e
實現FreeMarker+Ajax的無重新整理分頁
目前已經使用SpringBoot+MyBatis+PageHelper實現了物理分頁. 現在想通過Ajax實現FreeMarker的無重新整理分頁. 我的理解是最關鍵的地方在於如何替換FreeMarker中的標籤的值. 只要解決了這一點, 就可以輕鬆解決資料回顯和分頁出現的
Bootstrap Paginator分頁外掛+ajax 實現動態無重新整理分頁
之前做分頁想過做淘寶的那個，但是因為是後臺要求不高，就Bootstrap Paginator外掛感覺還蠻容易上手，所以就選了它。 Bootstrap Paginator分頁外掛下載地址： 1.這是需要分頁的頁面放的 js函式： <span style="font-
分享一個自己寫的MVC EF 增刪改查 無重新整理分頁程式
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
php 無重新整理分頁
首先看無重新整理分頁效果： （一） （二） 比較一二兩副圖可以看出，下面文字部分的翻頁了，但是整個頁面並沒有重新整理，視訊依然正常播放下去。 無重新整理的關鍵思路： 首頁，上一頁，下一頁，尾頁。點選時，呼叫onclick事件，然後跳轉到另外一張AJAX處理頁，同時傳入
jQuery 無重新整理分頁
<html> <head> <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script> <scrip