jQuery_jquery の jqGrid ページング実装コード-jsチュートリアル-php.cn

jQuery_jquery の jqGrid ページング実装コード

WBOY

リリース： 2016-05-16 17:59:43

オリジナル

1226 人が閲覧しました

(1) ページコード:

コードをコピーコードは次のとおりです:

;head>

ここにタイトルを挿入 href="js/themes/basic/grid.css" />

< ;script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#myTab").jqGrid({
datatype: "json" , // JSON データを使用するようにこれを変更します
url:'DataServlet', // これはアクションのリクエストアドレスです
mtype: 'POST',
height: 250,
width: 400,
ColNames:['number','name', 'phone'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int" },
{名前:'名前',インデックス:'名前',幅:90},
{名前:'電話',インデックス:'電話',幅:100}
],
pager: 'pager', //ページングツールバー
imgpath: 'js/themes/basic/images', //画像保存パス
rowNum:10, //各ページに表示されるレコード数
viewrecords: true, //行数を表示するかどうか
rowList:[10,20,30], //各ページに表示するレコード数は調整可能
multiselect: false, //マルチかどうか-select がサポートされています
caption: "情報表示 "
}); >

コードは次のとおりです:

/*** サーブレット実装クラス DataServlet */ public class DataServlet extends HttpServlet { private staticfinallongserialVersionUID = 1L;

/**
* @see HttpServlet#doGet(HttpServletRequest リクエスト、HttpServletResponse 
* レスポンス) 
*/ 
protected void doGet(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
// TODO 自動生成メソッド スタブ 
} 

/**
* @see HttpServlet#doPost(HttpServletRequest リクエスト、HttpServletResponse 
* レスポンス) 
*/ 
protected void doPost(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
String page = request.getParameter("page"); // 現在のページ数を取得します。これは jqgrid 自体のパラメータであることに注意してください。 
String rows = request.getParameter("rows"); // 行数を取得します。各ページに表示されます。これは jqgrid 自体のパラメータであることに注意してください。 
int totalRecord = 80; //レコードの総数 (データベースから取得する必要があります。ここでは単なるシミュレーションです) 
int totalPage = totalRecord % Integer.parseInt(rows) == 0 ? totalRecord 
/ Integer.parseInt(rows) : totalRecord / Integer.parseInt(rows) 
 1 // 合計ページ数を計算します
try { 
int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows); // レコード数を開始します
int pageSize = Integer.parseInt(rows); // 以下のシミュレーションJSON データ オブジェクトを構築します
String json = "{total: " totalPage ", page: " page 
 ", records: " totalRecord ", rows: ["; < pageSize インデックス && i < totalRecord; i ) { 
json = "{cell:['ID " i "','NAME " i "','PHONE " i 
 "']}; 
if (i != pageSizeindex - 1 && i != totalRecord - 1) { 
json = "," 
} 
} 
json = "]}"; >response.getWriter().write(json); // JSON データをページに返します 
} catch (Exception ex) { 
 } 
} 
} 

 


ディレクトリ構造: 





 表示される効果: 