一个常用的页面分页插件实例

一：（页面分页控件）页面head标签中引进：   

 

<script type="text/javascript" src="../libs/jquery.pagination_2/jquery.pagination.js"></script>

<link href="../libs/jquery.pagination_2/pagination.css" rel="stylesheet" type="text/css" media="all" />

 

html语句：

<div id="pagination" style="margin-top:5px;float: right;"></div>

 

   //分页
    var pageSize = 20;
    var pageIndex = 0;

    $(function(){
        loadFirstNode();
        search(true);
    });

    function search(resetPageIndex){
        resetPageIndex = resetPageIndex || false;
        if (resetPageIndex)
            pageIndex = 0;

        var url= "/s.do?obj=catalogDaoImpl";
        var nodeNamex = $("#nodeNamex").val();
        var i=4;//允许从叶子节点开始搜索
        while((code=$("#"+i+"Catalog").val())=="" && i>0){
            i--;
        }
        sendJsonrpcRequest


(url,"POST","getPagedList",{  //封装好的jsonrpc方式



                    query:{
                        "title":$("#nodeNamex").val(),
                        "lastOperator":$("#modifyPerson").val(),
                        "reservedInt":0,
                        "code":code,
                        "orderBy":"lastUpdateTime",
//                      "pageSize":20,  //等待liusan修复abstractDao代码  //改map文件中的"pageSize"为"limit"
                        "reservedField":"common_catalog"//传入表名
                    },
                    pageSize:pageSize,
                    pageIndex:pageIndex
                },null,
                function(data){
                    $("#pagination").show();
                    //返回的data是一个objct，包含一个list(取前面的n个记录用于本页显示)和count(总记录数)
                    nodeNamex = $("#nodeNamex").val();
                    for(var i=0;i<data.list


.length;i++){  //返回的data是根据数据库查询得到的一个PagedList<Catalog>
                                                                             //public class PagedList<T> {
	                                                                      //                     private int count;
                                                                              //            	private Collection<T> list; }



                  getCatalogPath(data.list[i]);

                        //关键字着色
                        data.list[i].title=data.list[i].title.replaceAll(nodeNamex,"<span style='color: red;'>"+nodeNamex+"</span>");
                    }
                    if (pageIndex == 0)
                        initPagination(data.count);

                    $("#mainbody").html("");
                    //alert(TrimPath.processDOMTemplate("template_jst_list", data));
                    if(data.list.length!=0){
                        $("#mainbody").append(
                                TrimPath.processDOMTemplate("template_jst_list",data));
                    }else{
                        $("#mainbody").append("<tr id='noData'><td colspan='5' align='center'><strong style='color: red'>没找到数据!</strong></td></tr>");
                        $("#pagination").hide();
                    }
                },null);

    }

    function getCatalogPath(p){
        //alert("GetCatalogPath");
        var url= "/s.do?obj=catalogDaoImpl";
        sendJsonrpcRequestSync(url,"POST","getCatalogPath",{code:p.code},null,
                function(data){
                    p.pathData=data;
                },null);
    }


    function pageselectCallback(page_index, jq) {
        pageIndex = page_index;
        search();
        return false;
    }

    function initPagination(count) {
        $("#pagination").pagination(count, {
            callback : pageselectCallback,
            prev_text : "上一页",
            next_text : "下一页",
            items_per_page : pageSize
            // Show only one item per page
        });
    }

 其中，sendJsonrpcRequest（。。）是对jsopnrpc的一个请求的封装：

function sendJsonrpcRequest(url, httpMethod, method, params, extraParams, callback, errorCallback) {	
	//jsonrpc请求参数
	var o = createJsonRpcObject(method,params);
	
	sendJsonrpcRequestX(url,httpMethod,o,callback,errorCallback, true);
}

function createJsonRpcObject(method,params){
	var o = {};
	o.id = 1;
	o.method = method;
    o.params = params;
	o.jsonrpc = "2.0";
	
	return o;
}

function sendJsonrpcRequestX(url, method, jsonrpcRequestObject, callback, errorCallback, async){
	var d = {};	
	d["jsonrpcContent"] = JSON.stringify(jsonrpcRequestObject);
	d["rnd"] = Math.random();
	
	if(!$.browser.msie)//2012-08-14，非IE增加charset=utf-8参数，表示服务器要转码。解决IE下，提交的+号，在服务器端被utf8转换导致丢失的问题
		d = "charset=utf-8&jsonrpcContent="+ encodeURIComponent(encodeURIComponent( d.jsonrpcContent )) + "&rnd=" + d.rnd;
	
	$.ajax({
		async : async, //2012-08-13
		type : method,//"GET",
		url : url,		
		//contentType: "application/x-www-form-urlencoded; charset=gbk", 
		dataType : "json",
		data : d,
		
		//2012-08-10 上面的data两次encodeURIComponent，服务端用java.net.URLDecoder.decode(request.getParameter("jsonrpcContent"), "utf-8");
		
		success : function(data) {
			if (data.error) {
				if (errorCallback)
					errorCallback(data.error);
				else
					alert(data.error.message);
			} else if (callback){
				if($.isArray(jsonrpcRequestObject))
					callback(data); //2012-04-19增加【|| data】，解决批量请求的问题
				else
					callback(data.result);
			}
		},
		error : function(data){//2012-02-15 by liusan.dyf
			//alert("jsonrpc error");
		}
	});
}

  web.xml中有一个配置，对请求进行过滤截获：

  	<filter>
        <filter-name>jsonRpcFilter

</filter-name>
        <filter-class>com.taobao.riskm.filter.JsonRpcFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>jsonRpcFilter</filter-name>
        <url-pattern>/s.do</url-pattern>
    </filter-mapping>

 JsonRpcFilter类中就有对jsonrpc的一个请求处理过程：

 

public class JsonRpcFilter implements Filter {
	Map<String, Object> objects = new HashMap<String, Object>();

	private static final String DEFAULT_OBJ_KEY = "kv";
	private static final String X = "$userName$";

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		//提示信息不包括堆栈信息
		JsonRpcService.outputErrorStackTrace(false);
		// 注册对象
		objects.put(DEFAULT_OBJ_KEY, SpringBeanUtil.getBean("keyValueDao"));
		objects.put("catalogDaoImpl", SpringBeanUtil.getBean("catalogDao"));
		objects.put("httpRequest", new HttpRequest());// 2012-02-20
//		objects.put("6catalogDao", SpringBeanUtil.getBean("6catalogDao"));// 2012-05-17

		// 注册类的方法
		JsonRpcService.registerAllMethods(objects.get(DEFAULT_OBJ_KEY)
				.getClass());
		JsonRpcService.registerAllMethods(CatalogDaoImpl.class);// 2012-02-27
		JsonRpcService
				.registerAllMethods(objects.get("httpRequest").getClass());
		JsonRpcService.registerAllMethods(CounterDaoImpl.class);// 2012-03-05


		// 建立隐射 2012-02-28
		// JsonRpcService.mapTo(CatalogDaoImplWrapper.class,
		// CatalogDaoImpl.class);

		// // 测试
		// KeyValueService s = (KeyValueService) o;
		// System.out.println("s.getKeyValueClusterCaller()!=null:"
		// + (s.getKeyValueClusterCaller() != null));
	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		// System.out.println(json);
		String json = request.getParameter("jsonrpcContent");
	    // 用参数指定是否转码 2012-08-14
	    if ("utf-8".equals(request.getParameter("charset")))
	        json = java.net.URLDecoder.decode(json, "utf-8");

		if (!tools.Validate.isBlank(json)) {
			tools.web.ServletUtil.addJsonContentType(
					(HttpServletResponse) response, "GBK");

			// 2012-04-16 by liusan.dyf
			User u = Global.getCurrentUser();
			if (u != null) {
				json = tools.StringUtil.replaceAll(json, X, u.getUserName());
			}

			// key
			String objKey = request.getParameter("obj");
			if (tools.Validate.isBlank(objKey))
				objKey = DEFAULT_OBJ_KEY;

			// 得到调用的对象
			Object invokeObject = null;

			invokeObject = objects.get(objKey);

			// 开始调用
			if (invokeObject != null) {
				String result = JsonRpcService.invokeToString(invokeObject,
						json, true);
				// JsonRpcService.invoke(o, json, true);
				response.getWriter().append(result);
				return;
			} else {
				String error = JsonRpcService

.toJsonRpcErrorResult(0, -32602,
						"错误的objKey");
				response.getWriter().append(error);
			}
			// System.out.println(result);
		} else
			chain.doFilter(request, response);
	}

  JsonRpcService类中的大致处理方法：

private static final ObjectMapper jsonMapper;


	static {
		jsonMapper = Json.getObjectMapper();
	}

	public static String invokeToString(Object obj, String request,
			boolean autoRegister) {
		InvokeResultList invokeResults = invokeBatch(obj, request, autoRegister);// 执行批量请求
		List<String> jsonStringList = new ArrayList<String>(invokeResults
				.getResults().size());

		try {
			List<SingleInvokeResult> list = invokeResults.getResults();

			// 循环拼接json
			for (SingleInvokeResult item : list) {
				if (item.getResult() instanceof JsonRpcError) {
					jsonStringList.add(item.getResult().toString());// 响应error
				} else {// 正确的响应
					Map<String, Object> m = toJsonRpcResultMap(item.getId(),
							item.getResult());
					jsonStringList.add(jsonMapper.writeValueAsString(m));
				}
			}

			// 输出json
			if (!invokeResults.isBatch())
				return jsonStringList.get(0);
			else {
				int left = jsonStringList.size();
				StringBuilder builder = new StringBuilder();

				builder.append("[");
				for (String s : jsonStringList) {
					left--;
					builder.append(s);
					if (left > 0)
						builder.append(",");
				}

				builder.append("]");
				return builder.toString();
			}
		} catch (Exception e) {
			LOGGER.error(e);
		}

		return null;
	}

  废话有点多，下面兄弟我直接上了个分页的能亲眼看见的例子好了，方便大家在web项目开发的过程中参考使用，对你有帮助的时候也顶一下（见附件，如果附件没有了就给我发站内信）。

   二： 对web开发，在分页的时候需要把从数据库查到的list数据在页面中也table的方式展现出来，这是又可以用到一个模版插件：

<script type="text/javascript" src="../libs/template/trimpath-template.js"></script>

该插件在附件中已经含有。

其使用方式：

<html>
  <head>
    <script type="text/javascript" src="../libs/template/trimpath-       template.js"></script>
   </head>
  <body>
           <div class="board">
                <table class="niceTab" id="mainBody">
                </table>
            </div>
       <div id="pagination" style="margin-top:5px;float: right;"></div>
  
  。。。
  <textarea name="template_jst_list" id="template_jst_list"
          style="display: none;" cols="0" rows="0">
    <tr>
        <th scope="col">节点名称</th>
        <th scope="col">类型路径</th>
        <th scope="col">修改者</th>
        <th scope="col">修改时间</th>
        <th scope="col">操作</th>
    </tr>
    {for p in list}
    <tr id="tr_@{hashCode(p.id)}">
        <!--<td class="name1">@{p.code}</td>-->
        <td class="name2"><a href="../casedetails.action?riskId=@{p.id}" target="_self">@{p.title}</a></td>
        <td class="name3">@{p.pathData}</td>
        <td class="name4">@{p.lastOperator}</td>
        <td class="name6">@{toDate(p.lastUpdateTime)}</td>
        <td class="name5"><a href="../casemodify.action?riskId=@{p.id}" target="_self">编辑</a>&nbsp;&nbsp;<span onclick="delCase('@{p.id}')"><a href="#">删除</a></span></td>
    </tr>
    {/for}
</textarea>
</body>
</html>

<script type="text/javascript">
    function showTable(){
   $. ajax(
    ajax的post参数和返回参数的xxx的配置,如果没有设置返回的参数类型的限制，就会按照java中设置的response写入的MIME类型。
    function(data){
    $("#pagination").show();
    $("#mainBody").html("");
                    if(data.list.length!=0){

                        $("#mainBody").append(
                                    TrimPath.processDOMTemplate
("template_jst_list", data));
                    }else{
                        $("#mainBody").append("<tr id='noData'><td colspan='5' align='center'><strong style='color: red'>没找到数据!</strong></td></tr>");
                        $("#pagination").hide();
                    }
    });
    }

    // 转换时间
    function toDate
(timestamp){
        var d = new Date(timestamp);
        return d.format("yyyy-MM-dd hh:mm");
//      return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate()+" "+d.getHours()+":"+d.getMinutes();
    }
</script>

 其中有一个时间转换的js函数toDate（。。）也很常用。

用一个封转好的jsonrpc的方式删除表格中的某一条具体值：

 

    function delCase(code){
        var url = "/s.do?obj=catalogDaoImpl";
        if(!confirm("亲，您确定删除这个节点？")) return;

        sendJsonrpcRequestSync(url,"POST","deleteItemOnCondition",{catalogCode:code},
                null,function(data){
                    if(data==1){
                        alert("该风险下有附件，删除失败！");
                    }else if(data==2){
                        alert("该风险下有关联处罚案例库，删除失败！");
                    }else{
                        $("#tr_"+hashCode
(code)).remove();
                    }
                },null);
    }

  上面的hashCode函数在util.js中已经定义，util.js中定义了很多有用的js函数，可以在需要的时候引用，能增加开发的效率（已经在附件中包含）。