jquery分頁條（基於pagehelper）

来源:https://www.cnblogs.com/yao-zhen-peng/archive/2018/09/18/9670861.html
-Advertisement-
Play Games

function getbookinfo(pageNum,pageSize) { var datas='default'; var realUrl="/ssm/book/findALL/"+pageSize+"/"+pageNum+""; var realType="POST"; jQuery.aj... ...


function getbookinfo(pageNum,pageSize)
{
	var datas='default';
	var realUrl="/ssm/book/findALL/"+pageSize+"/"+pageNum+"";
	var realType="POST";
	jQuery.ajax({
		url: realUrl,
        type: realType,
        dataType: "json",
        async: false,
        success: function (dataTemp) {
            datas = dataTemp;
            //console.log('datas------------1----------'+datas);
        },
        error: function (jqXHR,textStatus,errorThrown){
        	//console.log('textStatus----------'+textStatus);
        	//console.log('jqXHR.readyState----------'+jqXHR.readyState);
        	datas='getbookinfoerror';
        	alert('error');
        }
	});
	return datas
}

function table_tr(table_data)
{
	var tabledata="";
	for(var j = 0;j<table_data.books.length;j++){
		tabledata +="<tr>";
		tabledata +="<td><input type='checkbox' name='bookid' id='"+table_data.books[j].bookid+"' value='"+table_data.books[j].bookid+"'></td>";
		tabledata +="<td><input  readonly='readonly' type='text' name='bookname' id='"+table_data.books[j].bookid+"_bookname' value='"+table_data.books[j].bookname+"'></td>";
		tabledata +="<td><input  readonly='readonly' type='text' name='download' id='"+table_data.books[j].bookid+"_download' value='"+table_data.books[j].download+"'></td>";
		tabledata +="<td><input  readonly='readonly' type='text' name='publishdate' id='"+table_data.books[j].bookid+"_publishdate' value='"+table_data.books[j].publishdate+"'></td>";
	    tabledata +="<td><input  readonly='readonly' type='text' name='link' id='"+table_data.books[j].bookid+"_link' value='"+table_data.books[j].link+"'></td>";
	    tabledata +="</tr>";
	}
	
	jQuery("tbody").empty();
	jQuery("tbody").prepend(tabledata);
}
function tableInsert(table_data)
{
	//將返回的值拼接到表裡
	table_tr(table_data);
}

function tableframe()
{
	var tabledata="";
	tabledata +="<thead>";
	tabledata +="<tr>";
	tabledata +="<th>選擇</th>";
	tabledata +="<th>圖書名稱</th>";
	tabledata +="<th>下載量</th>";
	tabledata +="<th>出版時間</th>";
	tabledata +="<th>外鏈數</th>";
	tabledata +="</tr>";
	tabledata +="</thead>";
	tabledata +="<tbody>";
	tabledata +="</tbody>";
	jQuery("table").append(tabledata);//  拼接進<table></table>
}

jQuery(function() {
	tableframe();//拼接table的表頭
	var pageSize=1;//每頁顯示數量
	jQuery("#pageSize").val(parseFloat(pageSize));
	var pageNum=1;//初始頁碼
	jQuery("#pageNum").val(parseFloat(pageNum));
	loadtable(pageSize,pageNum);
})


//更新數據後調用分頁條的例子
function loadtable(pageSize,pageNum)
{
	
	//調用數據：根據當前頁碼pageNum,每頁顯示數量pageSize,從後臺取值，後臺建議用mybatis和pagehelper
	var table_data=getbookinfo(pageNum,pageSize);//實際使用到getbookinfo方法里根據ajax獲取數據，
	//更新數據
	tableInsert(table_data);//實際使用到tableInsert里拼接數據，
	
	//重新更新頁面數據需要更新分頁條需要的信息放到頁面，然後將pageInfo返回的導航分頁NavigatepageNums直接拼接成分頁條
	jQuery("#pageSize").val(parseFloat(pageSize));
	jQuery("#pageNum").val(parseFloat(pageNum));
	jQuery("#pages").val(table_data.pages);
	var allpageNum=jQuery("#allpageNum").val(table_data.NavigatepageNums);
	var total=jQuery("#total").val(table_data.total);
	
	//調用分頁條方法
	pageToorBar();
	
}
//分頁插件
function pageToorBar()
{
	//------------使用方法：可以通過mybatis的pagehelper從後臺傳數據到頁面並將以下參數賦值，然後在調用本分頁方法pageToorBar()
	//-------如下例子
	//<lable>每頁顯示數量pageSize</lable>
	//<input readonly='readonly'  type="text" name="pageSize"  id="pageSize"  value="" />
	//<lable>當前頁碼pageNum</lable>
	//<input readonly='readonly'  type="text" name="pageNum"  id="pageNum"  value="" />
	//<lable>總頁數pages</lable>
	//<input readonly='readonly'  type="text" name="pages"  id="pages"  value="" />
	//<lable>總記錄數total</lable>
	//<input readonly='readonly'  type="text" name="total"  id="total"  value="" />
	//<lable>分頁條數據</lable>
	//<input readonly='readonly' type="text" name="allpageNum" id="allpageNum" value=""/>
	//---------頁面上要有放置分頁條的地方，如下：
	//由於用了bootrapt分頁條佈局需引入：
	//相應bootstrap配置：bootstrap.min.css
	//相應bootstrap配置：jquery-3.3.1.min.js
	//相應bootstrap配置：bootstrap.js  
	//bootrapt分頁條:
	//<nav aria-label="Page navigation">
	//	  <ul class="pagination">
	//	  		<li><span>首頁</span></li>
	//	  		<!-- 上一頁 -->
	//		    <li><span aria-hidden="true">«</span></li>
	//		    
	//		    <!-- 頁碼 -->
	//		    <li ><span>1</span></li> <!-- li標簽：設置無法點擊class="disabled"     選中class="active" -->
	//		    <li class="disabled"><span>..</span></li> 
	//		    <li ><span>1000</span></li>
	//		    <!-- 下一頁 -->
	//		    <li><span aria-hidden="true">»</span></li>
	//		    <li><span>尾頁</span></li>
	//	  </ul>
    //</nav>
	
	var allpageNum=jQuery("#allpageNum").val();
	var pageNum=jQuery("#pageNum").val();
	table_pageToorbar(allpageNum,pageNum);
	
}

function table_pageToorbar(allpageNum,nowpage)
{
	
	var allpageNumArray=new Array();
	allpageNumArray=allpageNum.split(",");//頁碼數組
	jQuery("ul").empty();  
	var pageToorbar="<li><span onclick='firstpage()'>首頁</span></li>";
	pageToorbar += "<li><span onclick='previouspage()' aria-hidden='true'>上一頁</span></li>";
	
	 pageToorbar = table_pageToorbar_insert(allpageNumArray,nowpage,pageToorbar);
	
    pageToorbar += "<li><span  onclick='nextpage()' aria-hidden='true'>下一頁</span></li>";
    pageToorbar += "<li><span onclick='lastpage()' >尾頁</span></li>";
    jQuery("ul").prepend(pageToorbar);  
}

function table_pageToorbar_insert(allpageNumArray,nowpage,pageToorbar)
{
    for(var i=0;i<allpageNumArray.length;i++)
    {
   		
		if(allpageNumArray[i]==nowpage)
  		{
  			pageToorbar += "<li class='active'><span onclick='gopage("+allpageNumArray[i]+")'>"+allpageNumArray[i]+"</span></li>";
  			
  		}else
  		{
  			pageToorbar += "<li ><span onclick='gopage("+allpageNumArray[i]+")'>"+allpageNumArray[i]+"</span></li>";
  			
  		}
   		
    }
   	return pageToorbar;
}

function nextpage() 
{
	var pageSize=jQuery("#pageSize").val();
	var total=jQuery("#total").val();
	var pageNumnow=jQuery("#pageNum").val();
	
	var allpageNum=jQuery("#allpageNum").val();
	var allpageNumArray=new Array();
	allpageNumArray=allpageNum.split(",");//頁碼數組
	var lastpagenum=allpageNumArray[allpageNumArray.length-1];
	
	if(total!='0')
	{
		if(lastpagenum==pageNumnow)
		{
			return;
		}else{
			jQuery("#pageNum").val(parseFloat(pageNumnow)+1);
			var pageNum=jQuery("#pageNum").val();
			//更新數據和分頁條方法
			loadtable(pageSize,pageNum);
		}	
	}
}
function lastpage()
{
	var pageSize=jQuery("#pageSize").val();
	var pages=jQuery("#pages").val();
	if(total!='0')
	{
		jQuery("#pageNum").val(parseFloat(pages));
		var pageNum=jQuery("#pageNum").val();
		//更新數據和分頁條方法
		loadtable(pageSize,pageNum);
	}

}

function firstpage()
{
	var pageSize=jQuery("#pageSize").val();
	if(total!='0')
	{
		jQuery("#pageNum").val(1);
		var pageNum=jQuery("#pageNum").val();
		//更新數據和分頁條方法
		loadtable(pageSize,pageNum);
	}
}
function previouspage() 
{
	var pageSize=jQuery("#pageSize").val();
	var total=jQuery("#total").val();
	var pageNumnow=jQuery("#pageNum").val();
	if(total!='0')
	{
		var ys=total%pageSize;
		var ms=total/pageSize;
		if(ys=='0')
		{
			if(pageNumnow=='1')
			{
				return;
			}else{
				jQuery("#pageNum").val(parseFloat(pageNumnow)-1);
				var pageNum=jQuery("#pageNum").val();
				//更新數據和分頁條方法
				loadtable(pageSize,pageNum);
			}	
		}else{
			if(pageNumnow=='1')
			{
				return;
			}else{
				jQuery("#pageNum").val(parseFloat(pageNumnow)-1);
				var pageNum=jQuery("#pageNum").val();
				//更新數據和分頁條方法
				loadtable(pageSize,pageNum);
			}	
		}	
	}
}
function gopage(pagenum)
{
	var pageSize=jQuery("#pageSize").val();
	var total=jQuery("#total").val();
	jQuery("#pageNum").val(parseFloat(pagenum));
	var pageNum=jQuery("#pageNum").val();
	//更新數據和分頁條方法
	loadtable(pageSize,pageNum);
}

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Spark2.1.0模型設計與基本架構（上）
    隨著近十年互聯網的迅猛發展，越來越多的人融入了互聯網——利用搜索引擎查詢詞條或問題；社交圈子從現實搬到了Facebook、Twitter、微信等社交平臺上；女孩子們現在少了逛街，多了在各大電商平臺上的購買；喜歡棋牌的人能夠在對戰平臺上找到世界各地的玩家對弈。在國內隨著網民數量的持續增加，造成互聯網公... ...
  • MySQL5.7.17解壓版安裝
    首先將mysql解壓，公司的mysql解壓後自帶my.ini文件，結構如下： 在my.ini文件中配置的data路徑在my文件夾下，需要刪掉，然後修改my.ini文件中basedir和datadir路徑，我的mysql是在D:\mysql 打開cmd命令視窗cd到mysql下的bin文件夾，執行以下 ...
  • [oracle部署實施]基於centos7.5、oracle11g r2手工建庫過程
    已提前最小化安裝centos7.5和oracle 11g r2裸資料庫軟體，記錄下手工建庫過程，方便瞭解dbca建庫原理。 1.環境變數設置 #設置環境變數 cat >> /home/oracle/.bash_profile > /home/oracle/.bashrc > $ORACLE_HOME... ...
  • 如何在MongoDB設計存儲你的數據（JSON化）？
    第一步 定義要描述的數據集 當我們決定將數據存儲下來的時候，我們首先要回答的一個問題就是：“我打算存儲什麼樣的數據？這些數據之間有什麼關係？實體之間有什麼關係？實體的屬性之間有什麼關係”。 為了說明問題，我們這兒舉例的場景是要描述 庫存清單的資料庫，庫存清單數據 包括 物料名稱、數量、規格大小、狀態 ...
  • iOS----------適配iOS12
    library not found for -lstdc++.6.0.9 原因是蘋果在XCode10和iOS12中移除了libstdc++這個庫，由libc++這個庫取而代之，蘋果的解釋是libstdc++已經標記為廢棄有5年了，建議大家使用經過了llvm優化過並且全面支持C++11的libc++庫 ...
  • 微信分享大圖遇到的問題（Android）
    起因： 要做一個微信圖片分享的功能，但是對於大圖會如下問題： 當時沒有仔細查看錯誤日誌，單純的以為是圖片太大的問題。 分享圖片代碼： 解決過程： 想法一： 查看微信的文檔，發現如下信息： 初步判定是略縮圖過大導致的，準備對略縮圖進一步壓縮。 但是在調試過程中發現略縮圖並沒有超過32K，於是這種想法不 ...
  • Android 圖片載入框架 Glide4.x
    概述 Glide是一個圖片載入框架，使得我們可以輕鬆的載入和展示圖片 Glide4.x新增apply()來進行設置，apply可以調用多次，但是如果兩次apply存在衝突的設置，會以最後一次為準 新增RequestOptions對象，用來存放設置 添加依賴 Gilde的圖片載入 基本實例 with( ...
  • javascript基礎修煉(6)——前端路由的基本原理
    【造輪子】是筆者學習和理解一些較複雜的代碼結構時的常用方法，它很慢，但是效果卻勝過你讀十幾篇相關的文章。為已知的API方法自行編寫實現，遇到自己無法復現的部分再有針對性地去查資料，最後當你再去學習官方代碼的時候，就會明白這樣做的價值，總有一天，你也將有能力寫出大師級的代碼。 一. 前端路由 現代前端 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類