easyui 中的datagrid分頁技術實現

阿新 • • 發佈：2019-01-17

一些基本的知識參考官網 http://www.jeasyui.com/documentation/index.php#

這裡我強調二點

第一點

datagrid會向後臺傳遞

rows（每一頁展示多少條資料），

page（第幾頁）

這兩個資料，而在文件中沒有指出來，這也是我今天弄了很久的原因（看別人寫的程式碼發現的這一點）

第二點

後臺傳json資料時也要按照datagrid的資料格式，另外分頁有兩個資料，文件也沒有指出來

total鍵存放總記錄數
rows鍵存放每頁記錄

有了這兩點，分頁就比較容易實現了

一般按其預設的方法就行

下面貼程式碼，這裡只貼關鍵的

後臺

	private int rows;//每頁多少條資料
	private int page;//第幾頁
	public void setRows(int row){
		System.out.println(row);
		this.rows = row ;
	}
	public void setPage(int page){
		System.out.println(page);
		this.page = page ;
	}
	//傳給datagrid的資料
	public Map<String,Object> getMapData(){
		return this.mapData ;
	}
	
	public String getDataGrid(){
		System.out.println("here");
		mapData = new HashMap<String,Object>();
		
		List<Map<String,Object>> listDataGrid;//存放每一頁的資料
		Map<String,Object> dgMap;
		List<GpsData> listDG;
		listDG = gpsDataService.getGpsDataList();
		listDataGrid = new ArrayList<Map<String,Object>>();
		
		int len = listDG.size() ;//防止越界
		for(int i=(page-1)*rows ; i<  page*rows && i< len ; i++){//採用分頁機制查詢
			dgMap = new HashMap<String,Object>();
			dgMap.put("terminalId", listDG.get(i).getTerminalId());
			dgMap.put("msgTime", listDG.get(i).getMsgTime());
			dgMap.put("lon", listDG.get(i).getDegreeLon());
			dgMap.put("lat", listDG.get(i).getDegreeLat());
			dgMap.put("speed", listDG.get(i).getSpeed());
			listDataGrid.add(dgMap);
		}
		
		mapData.put("total", len);//total鍵 存放總記錄數，必須的
		mapData.put("rows", listDataGrid);//rows鍵 存放每頁記錄 list
		
		return "datagrid" ;
	}

前臺

 $(function(){
  	$('#dg').datagrid({
  		url:'getDataGrid',
  		singleSelect:true,
  		ctrlSelect:true,
  		method:'post',
  		loadMsg:'loading......',
  		collapsible:true,//可摺疊
  		pagination:true,	
  		rownumbers:true,
  		pageSize:15,
  		pageList:[5,15,30]
  		});
  	$('#dg').datagrid('getPager').pagination({

  		displayMsg:'當前顯示第 {from}-{to} 條記錄 ， 共 {total} 條記錄'

  	});
  	});

  <body>
  <div class="easyui-layout" style="width:100%;height:100%">
  	<div data-options="region:'west',title:'時間',split:'true'" style="width:300px">時間
  	</div>
  	<div data-options="region:'center',title:'後臺資料資訊展示'" >
  	
  	 <div id="tdg" class="easyui-layout" style="width:100%;height:100%">
  	  <div data-options="region:'center'" >
		<table id="dg" class="easyui-datagrid" title="data grid" style="height:500px">
			<thead>
				<tr>
					<th data-options="field:'terminalId',width:80,align:'center'">裝置號</th>
					<th data-options="field:'msgTime',width:120,align:'center'">GPS時間</th>
					<th data-options="field:'lon',width:150,align:'center'">經度</th>
					<th data-options="field:'lat',width:150,align:'center'">緯度</th>
					<th data-options="field:'speed',width:80,align:'center'">車速</th>
				</tr>
			</thead>
		</table>
	  </div>
	 </div>
	 
	</div>
  </div>
  </body>

easyui 中的datagrid分頁技術實現

一些基本的知識參考官網 http://www.jeasyui.com/documentation/index.php# 這裡我強調二點第一點 datagrid會向後臺傳遞 rows（每一頁展示多少條資料）， page（第幾頁）這兩個資料，而在

關於easyui中datagrid分頁問題--摘

bool ams 版本捷信 default table ... Matter agen 首先datagrid中的pagination屬性設置為true：如 $(‘#dg1‘).datagrid({ url:"{:U(‘Rearlogin/ajaxNoticeA

easyui中的分頁實現(支援MySQL，SQLServer，Oracle)

package com.dxwind.common.bean; import java.sql.CallableStatement; import java.sql.ResultSet; import java.sql.ResultSetMetaData; import java.sql.SQLExcept

EasyUI easyui-datagrid分頁功能實現

$('#dg_query').datagrid({ toolbar:toolbar, loadMsg:'資料載入中....',

EasyUI之DataGrid分頁

ets before table rst add function use userdata pat 第一步創建分頁DataGrid <table id="dg"> <thead> <tr> <th

Flask實戰第60天：帖子分頁技術實現

分頁技術 pip for 實現 index pytho itl 測試 manager 編輯manage.py，添加測試帖子 @manager.command def create_test_post(): for x in range(1, 100):

JavaWeb中的分頁技術

前段時間學習SSH框架用到分頁知識，為此還回顧了一下之前JavaWeb中的分頁技術首先我們先建立一個庫和表用來展示分頁結果 create table Employee( empId int(11) NOT NULL AUTO_INCREMENT primary key, empName

分頁技術實現分析

分頁技術： JSP頁面，用來顯示資料！如果資料有1000條，分頁顯示，每頁顯示10條，共100頁; 好處: 利於頁面佈局，且顯示的效率高！分頁關鍵點：分頁

JSP分頁技術實現

目前比較廣泛使用的分頁方式是將查詢結果快取在HttpSession或有狀態bean中，翻頁的時候從快取中取出一頁資料顯示。這種方法有兩個主要的缺點：一是使用者可能看到的是過期資料；二是如果資料量非常大時第一次查詢遍歷結果集會耗費很長時間，並且快取的資料也會佔用大量記憶

Django中ListView分頁技術

分頁技術在Web開發中應用非常頻繁。常見的WEB中都是用javascript去控制的，而Django中分頁非常方便，通過Pagination你可以很方便達到分頁效果。今天主要說的是共同檢視中ListView的分頁處理，本質還是依賴與Pagination。資料模型：mode

JSP中資料分頁的實現

分頁查詢的實現 1) 首先建立一個pageBean，包含pageIndex(頁碼索引)、total（頁碼總數）、pageSize（每頁容量）、tar(分頁條)、dataList(資料物件集) 屬性 // 頁碼索引 private int pageIndex; // 每頁

EasyUI Datagrid 分頁的情況下實現點選表頭的小三角圖示對資料庫中所有資料重新排序

說明一下：當點選 datagrid 表頭某一列的小三角圖示時，easyui 本身是有排序的，但是在當我們對 datagrid 進行了分頁的情況下，點選排序只是對當前頁的資料進行排序，而需求需要我對資料庫裡面的所有資料進行排序，這樣的話只能從後臺先排好序再返回了。看了一下文件，發

easyui datagrid pagination分頁模擬實現

easyui給出的分頁元件，需要結合datagrid，pagination，資料展現使用datagrid，分頁展現使用的是pagination，兩者必須混合使用，才能展現一個分頁列表，如下圖所示：預設的分頁列表實現如下： <table class="easyui

jquery easyui datagrid 分頁實現---善良公社專案

接著上篇文章，接下來給大家分享分頁的實現，分頁其實多多少少見過很有幾種,框架中帶的圖片都特別的好看，會給使用者以好的使用效果，具體實現，需要自己來補充程式碼；圖示1：通常情況下

easyui datagrid 前臺分頁的實現

原文連結：https://www.cnblogs.com/wangyt223/p/4189414.html使用easyui分頁，有後臺伺服器端實現和前臺瀏覽器端實現。伺服器端實現按規定的格式返回資料就可以了，前臺實現需要寫js來實現。程式碼如下：關鍵程式碼：123456789

EasyUI中datagrid設定分頁的PageSize和PageList

$('#tt').datagrid({ width: 880, nowrap: true, singleSelect: false, r

Easyui的datagrid中有分頁，如何設定分頁重新整理按鈕

var p = $('#manager').datagrid('getPager'); if (p){ $(p).pagination({ //設定分頁功能欄 //分頁功能可以通過Pagination的事件呼叫後臺分頁功能來實

easyui中的datagrid分頁控制元件設定與數值獲取

我對easyui+javaWeb中的分頁理解:datagrid(資料網格)的分頁中有一個附加的分頁控制元件，只需後臺獲取分頁控制元件自動提交的兩個引數rows(每頁顯示的資料條數)和page(當前頁碼)然後讀取相應頁數的記錄，和總記錄數total一塊返回即可

分頁技術原理與實現之分頁的意義及方法（一）

轉載自https://www.jb51.net/article/86326.htm。什麼是分頁技術分頁,是一種將所有資料分段展示給使用者的技術.使用者每次看到的不是全部資料,而是其中的一部分,如果在其中沒有找到自習自己想要的內容,使用者可以通過制定頁碼或是翻頁的方式轉換可見內容,

servlet如何實現分頁技術

Java中常見的分頁類別有物理分頁和邏輯分頁。對於一般的model專案可以使用邏輯分頁，對於資料比較多的，建議使用物理分頁。物理分頁只從資料庫中查詢出當前頁面的資料，不佔用很多記憶體，但效率比較低。邏輯分頁從資料庫中找到所有的資料，儲存到記憶體當中。展示的頁面

easyui 中的datagrid分頁技術實現

相關推薦