关于datatable 的学习用法总结

学习datatable的可以到他的中文网站去学习（对于我这样英语不好的而已）中文网站地址：http://dt.thxopen.com/

当然英文好的也可以去英文网站去逛逛：http://datatables.net/

我最近写的是在服务器端处理分页的 ，就是每页显示多少就从数据库当中差多少的那种表格这需要自己写的代码会多一点，不过写了之后想想也没想象中那么难了

首先先看看怎么配置在jsp中

<table id="table_server"
										class="table table-bordered table-striped table-hover">
										<thead>
											<tr>
												<th class="center"><label> <input
														type="checkbox" class="ace" /> <span class="lbl"></span>
												</label></th>
												<th>Title</th>
												<th>Auther</th>
												<th>category</th>
												<th>Status</th>
												<th>Date</th>
												<th>Operate</th>
											</tr>
										</thead>
										<tbody></tbody>
									</table>

这里<tbody></tbody>是必须的

然后就是要加载<tbody></tbody>里面的表格了，用ajax加载数据：

 

 

 

var   table = $('#table_server').DataTable({
		        ajax: {
		        	data: function (d){ return $.extend({},d,{
		        		"propertyName":name,
		        		"propertyValue":value
		        	});},
		            url: "<%=path%>/admin/postList_ajax.action"
		        },
		        serverSide: true,
		        columns: [
		  	            { "data": null,"render":function (data, type, full, meta) {return "<div align='center'> <input type='checkbox' class='ace'> <span class='lbl'></span></div>"},"bSortable": false },
		  	            { "data": "post_title" },
		  	            { "data": "author_name" },
		  	            { "data": "terms" },
		  	            { "data": "post_status" },
		  	            { "data": "post_date_" },
		  	            { "data": "operate","render": function (data, type, full, meta) {
			  	            var html="<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'><a class='green' href='"+path+"/admin/postEdit?id="+full.id+"&EditType=edit'><i class='icon-pencil bigger-130'></i></a>";
			  	         	html+="<a class='red'  οnclick='go("+full.id+")'><i class='icon-trash bigger-130' style='cursor: pointer;'></i></a>";
			  	            return html;},"bSortable": false
		  	            },
		        ],
				"aaSorting": [[5,'desc']],
				 "language": {"sSearch":"搜索：",
				                "lengthMenu": "_MENU_ 条记录每页",
				                "zeroRecords": "没有找到记录",
				                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
				                "infoEmpty": "无记录",
				                "infoFiltered": "(从 _MAX_ 条记录过滤)",
				                "paginate": {
				                   "previous": "上一页",
				                   "next": "下一页"
				                }
				            },
		        "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +
		                "t" +
		                "<'row'<'col-xs-6'i><'col-xs-6'p>>",
		        initComplete: function () {
		            $("#mytool").append("<label>Status<select id='statusList' name='' ><option value='publish'>publish</option><option value='private'>private</option><option value='draft'>draft</option><option value='pending'>pending</option></select></label>");
		            $("#mytool").append("<label class='categoryTreediv'></label>");
		           // $("#mytool").append('<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">添加</button>');
		           // $("#datainit").on("click", initData);
		          
   		 });	

 

initComplete: function () 这里可以写一些加载表格时的函数

 

然后就是action处理部分：

public String List_ajax() throws IOException {
	HttpServletRequest request = ServletActionContext.getRequest();
	request.getSession().setAttribute(
			"user",
			userService.getSession_user(request.getUserPrincipal()
				.getName()));
			//获取参数
			String name=	request.getParameter("propertyName");
			String value=	request.getParameter("propertyValue");
			//获取请求次数
		    String draw = "0";
		    draw = request.getParameter("draw");
		    //数据起始位置
		    String start = request.getParameter("start");
		    //数据长度
		    String length = request.getParameter("length");
		 
		    //总记录数
		    String recordsTotal =  postService.QueryPostCount();
		 
		    
		  //定义列名
		    String[] cols = {"id","post_title", "author_name", "terms", "post_status","post_date",  "post_author"};
			
		    //获取客户端需要那一列排序
		    String orderColumn = "0";
		    orderColumn = request.getParameter("order[0][column]");
		    orderColumn = cols[Integer.parseInt(orderColumn)];
		    //获取排序方式 默认为asc
		    String orderDir = "asc";
		    orderDir = request.getParameter("order[0][dir]");
		 
		    //获取用户过滤框里的字符
		    String searchValue = request.getParameter("search[value]");
		 
			
			
		    Condition condition=new Condition();
		    condition.setStart_pos(Integer.parseInt(start));
		    condition.setLength(Integer.parseInt(length));
		    condition.setOrder_by(orderColumn);
		    condition.setSeachValue(searchValue);
		    condition.setOrder_type(orderDir);
		    condition.setPropertyName(name);
		    condition.setPropertyValue(value);
		    //过滤后记录数
		    String recordsFiltered = postService.QueryFilteredCount(condition);
		
			
			postListAll = postService.QueryPost2(condition);
			
		
		    StringBuilder sb=new StringBuilder() ;
			postListAll = postService.QueryPostMore(postListAll);
			SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
			for(int i=0;i<postListAll.size();i++){
				
			String	dt=sdf.format(postListAll.get(i).getPost_date());
			String date="<a href="+request.getContextPath()+"/admin/postList?propertyName=post_date&propertyValue="+dt+" >"+dt+"</a>";
			postListAll.get(i).setPost_date_(date);
			String author="<a href="+request.getContextPath()+"/admin/postList?propertyName=author_name&propertyValue="+postListAll.get(i).getPost_author()+" >"+postListAll.get(i).getAuthor_name()+"</a>";
			postListAll.get(i).setAuthor_name(author);
			String status="<a href="+request.getContextPath()+"/admin/postList?propertyName=post_status&propertyValue="+postListAll.get(i).getPost_status()+" >"+postListAll.get(i).getPost_status()+"</a>";
			postListAll.get(i).setPost_status(status);
			String title="<a href="+request.getContextPath()+"/admin/postEdit?id="+postListAll.get(i).getId()+" >"+postListAll.get(i).getPost_title()+"</a>";
			postListAll.get(i).setPost_title(title);
			}
			 Map<Object, Object> info = new HashMap<Object, Object>();
			 info.put("data", postListAll);
			 info.put("recordsTotal", recordsTotal);
			 info.put("recordsFiltered", recordsFiltered);
			 info.put("draw", draw);
			 String json=new Gson().toJson(info);
			response.getWriter().write(json);
			return null;
    }

Gson().也是要加在对应的jar文件的

datatable是个不错的插件，功能不仅仅这样的表格，可以到中文网去看看，学系学习

这只是我写的一个成功代码有不明白的可以留言，希望可以帮到大家