首先得先引入对应的js

1、jquery.min.js  首先导入

2、 File:        jquery.dataTables.min.js
        Version:     1.9.4     这是我使用的版本

这是  jsp 页面

关键的table  代码

<table id="fuck" class="table table-bordered data-table">
									<thead>
									<tr>
									
            						<span style="white-space:pre">		</span>  <th>姓名</th>
         						  <span style="white-space:pre">		</span>  <th>账号</th>
              						 <span style="white-space:pre">		</span>  <th>登录时间</th>
            						<span style="white-space:pre">		</span></tr>
									</thead>
									<tbody>
									
									</tbody>
									</table> 

接着是  对 这个table  自己写的 js 文件   

这里我贴出关键代码

$("#fuck").dataTable({
			"oLanguage" : { // 汉化
				"sProcessing" : "正在加载数据...",
				"sLengthMenu" : "显示_MENU_条 ",
				"sZeroRecords" : "没有您要搜索的内容",
				"sInfo" : "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
				"sInfoEmpty" : "记录数为0",
				"sInfoFiltered" : "(全部记录数 _MAX_  条)",
				"sInfoPostFix" : "",
				"sSearch" : "搜索",
				"sUrl" : "",
				"oPaginate" : {
					"sFirst" : "第一页",
					"sPrevious" : " 上一页 ",
					"sNext" : " 下一页 ",
					"sLast" : " 最后一页 "
				}
			},
			"bJQueryUI": true,
			"bPaginate" : true,// 分页按钮
			"bFilter" : true,// 搜索栏
			"bLengthChange" : true,// 每行显示记录数
			"iDisplayLength" : 10,// 每页显示行数
			"bSort" : false,// 排序
			//"aLengthMenu": [[50,100,500,1000,10000], [50,100,500,1000,10000]],//定义每页显示数据数量
			//"iScrollLoadGap":400,//用于指定当DataTable设置为滚动时，最多可以一屏显示多少条数据
			//"aaSorting": [[4, "desc"]],
			"bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
			"bWidth":true,
			//"sScrollY": "62%",
            //"sScrollX": "210%",
            "bScrollCollapse": true,
			"sPaginationType" : "full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认
			"bProcessing" : true,
			"bServerSide" : true,
			"bDestroy": true,
			"bSortCellsTop": true,	
	        "sAjaxSource": '/getInfo.action', 
	        "aoColumns":
	           [  
			{ "mData": "id", 'sClass':'left'},
	        	{ "mData": "name", 'sClass':'center'}, 
	        	{ "mData": "account",'sClass':'left'},
	        	{ "mData": "logintime", 'sClass':'left'}
	            	/*
	            	{ "mData": "password",'sClass':'left',"mRender":function(data,type,full){
	            		return "<button type='button' onclick=fuck11("+data+")>"+data+"</button>"
	            		}
	            	}
	            	*/
	            ],
	        "fnServerData" : function(sSource, aoData, fnCallback) {
				$.ajax({
					"type" : 'post',
					"url" : sSource,
					"dataType" : "json",
					"data" : {
						aoData : JSON.stringify(aoData)
					},
					"success" : function(resp) {
						fnCallback(resp);
					}
				});
	
			}
			 
		});

这是struts2的关键代码

public String list() {
		String sEcho = "";// 记录操作的次数  每次加1
		String iDisplayStart = "";// 起始
		String iDisplayLength = "";// size
		String sSearch = "";// 搜索的关键字
		int count = 0 ;  //查询出来的数量
		JSONArray ja = (JSONArray) JSONArray.parse(aoData);
		//分别为关键的参数赋值
		for (int i = 0; i < ja.size(); i++) {
			JSONObject obj = (JSONObject) ja.get(i);
			if (obj.get("name").equals("sEcho"))
				sEcho = obj.get("value").toString();
			if (obj.get("name").equals("iDisplayStart"))
				iDisplayStart = obj.get("value").toString();
			if (obj.get("name").equals("iDisplayLength"))
				iDisplayLength = obj.get("value").toString();
			if (obj.get("name").equals("sSearch"))
				sSearch = obj.get("value").toString();
		}
		
		//为操作次数加1
		int  initEcho = Integer.parseInt(sEcho)+1;
		count = managerService.findManagerToPageCount(Integer
				.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);
		List<Manager> managers = managerService.findManagerToPage(Integer
				.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);
		dataMap.put("iTotalRecords", count);
		dataMap.put("sEcho",initEcho);
		dataMap.put("iTotalDisplayRecords", count);
		dataMap.put("aaData", managers);
		return SUCCESS;
	}

Jquery的DataTable插件 AJAX 服务器分页的的学习心得（java版）,布布扣,bubuko.com

Jquery的DataTable插件 AJAX 服务器分页的的学习心得（java版）