java开发-Jquery.datatable控件

最新推荐文章于 2023-10-13 11:16:05 发布

原创最新推荐文章于 2023-10-13 11:16:05 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

datatable 专栏收录该内容

1 篇文章

订阅专栏

最近因为工作原因接触到了这个东西，看了不少教程，最后也算是慢慢出来了吧。记下来，有需要的人们带走吧。

其实我觉的学这个东西你应该从第一步开始看。

第一步:怎么让这个table显示出来再说！

前台页面一定要是这样结构的玩意：

<table id="table">
					<thead>
					</thead>
					<tbody>
					</tbody>
				</table>

其他样式什么的不管，但是一定得有thead，和tbody。之后导入他的js文件

加载这个页面之后，JS方法如下

$(document).ready(function() {
	oTable = $("#rable").dataTable({
		"sPaginationType" : "full_numbers",
		'bPaginate' : true, // 是否分页。
		"sZeroRecords" : "没有检索到数据",
		"sLoadingRecords" : "Loading...",
		"sProcessing" : "<img src='images/tables/load.gif' />",
		"bProcessing" : true, // 加载数据时显示正在加载信息
		"bServerSide" : true, // 指定从服务器端获取数据
		"fnServerData" : retrieveData,
		"oLanguage" : {//中文处理
			"sLengthMenu" : "<span class='showentries'>每页显示记录:</span> _MENU_ ",
			"sZeroRecords" : "<img src='images/tables/notfound.jpg' />",
			"sInfo" : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty" : "没有数据",
			"sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "前一页",
				"sNext" : "后一页",
				"sLast" : "尾页"
			}
		},
		"aoColumns" : [{//这个是table标题设置
					"sTitle" : "商品ID",
					"sClass" : "center"
				}, {
					"sTitle" : "商品标题",
					"sClass" : "center"
				}, {
					"sTitle" : "买家名称",
					"sClass" : "center"
				}, {
					"sTitle" : "操作",
					"sClass" : "center"
//					,
//					"fnRender" : function(obj) {//注释掉的这部分是应该是默认值。
//						return '<a href=\"Details/' + obj.aData[0]
//								+ '\">查看详情</a>  <input tag=\"' + obj.aData[0]
//								+ '\" type=\"checkbox\" name=\"name\" />';
//					}
				}]
	});
});

// 函数的参数是固定，不能更改。 结果，参数，调用方法
function retrieveData( sSource, aoData, fnCallback ) {     
//	for (var index = 0; index < aoData.length; index++) {//因为不知道这个aoData里面有什么，所以我就让它们显示出来看看
//		alert(aoData[index].name+"---"+aoData[index].value);
//	}
    $.ajax( {     
        type: "POST",      
        url: "/admin/getProductList",   
        dataType:"json",  
        data:"jsondata="+JSON.stringify(aoData), //传递到后台的参数，把aoData转成json传到后台到后台处理，这个里面有我们做排序和筛选的条件
        success: function(data) {   //成功后把按照他的规则反悔的信息fnCallback给这个table，让他自己去生成。
//           $("#url_sortdata").val(data.aaData);  
            fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式     
        }     
    });    
}

后台代码如下：

	@SuppressWarnings("unused")
	@RequestMapping(value = "/getProductList")
	private @ResponseBody
	String getProductList(@ModelAttribute("pager") Pager pager,
			HttpServletRequest request, HttpServletResponse response,
			HttpSession session, ModelMap model,
			@RequestParam(value = "jsondata", defaultValue ="") String jsondata) {
		JSONArray jsonarray = JSONArray.fromObject(jsondata);//在这里把aoData传递的东西用jsonoArrayObject接受
		Datatable d=new Datatable();//这个是我的一个辅助类，处理aoData里面的参数的，我觉的放在这里面太乱了，额，强迫症伤不起有没有
		Datatable.fileDatatable(jsonarray, d);//处理aoData方法，一会贴上来。
		pager.setCurrentPage(d.getPage_Currpage());//因为要做分页，所以设置分页的基本信息，d.getPage_Currpage()也是在刚才的辅助类里的
		pager.setPageLimit(d.getPage_Pagelimit());//同上
		PageUtil<Product> pu=productSer.dTable(pager, d);//根据辅助类查询信息，一会也贴出来
		JSONArray jsonDataArray = new JSONArray();//得出结果反回信息
		for (Product p : pu.getDatas()) {
			JSONArray j1 = new JSONArray();//这是表格内的信息，按照顺序排列好的哟，亲~
			j1.add(p.getId());
			j1.add(p.getTitle());
			j1.add(p.getManame());
			j1.add("<a target='_left' href="+p.getUrl()+">前去查看</a> <a href='/admin/getProduct/"+p.getId()+"'>修改</a>");
			jsonDataArray.add(j1);
		}
		JSONObject returnjobj = new JSONObject();
		returnjobj.put("sEcho", d.getsEcho());//不知道有什么用。。呵呵
		returnjobj.put("iTotalRecords", pu.getMaxCount());//一共有多少个行
		returnjobj.put("iTotalDisplayRecords", pu.getMaxCount());//处理后有多少航、、、
		returnjobj.put("aaData", jsonDataArray);//咱们的那个表格内的信息
		return returnjobj.toString();//反回
	}

辅助类的代码:

import com.sun.org.apache.bcel.internal.generic.NEW;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 * Jquery Datatable的辅助类
 * */
public class Datatable {
	private String sEcho; // 完全不知道是什么玩意
	private Integer page_Startclos; // 分页----开始的第一条记录
	private Integer page_Pagelimit; // 分页----每页显示数目
	private Integer page_Currpage; // 分页----显示第几页
	private String sort_Order; // 排序----顺序
	private String sort_Gist; // 排序----依据
	private String search_Gist; // 模糊查询----查询的条件

	public Integer getPage_Startclos() {
		return page_Startclos;
	}

	public void setPage_Startclos(Integer page_Startclos) {
		this.page_Startclos = page_Startclos;
	}

	public Integer getPage_Pagelimit() {
		return page_Pagelimit;
	}

	public void setPage_Pagelimit(Integer page_Pagelimit) {
		this.page_Pagelimit = page_Pagelimit;
	}

	public String getSearch_Gist() {
		return search_Gist;
	}

	public void setSearch_Gist(String search_Gist) {
		this.search_Gist = search_Gist;
	}

	public String getSort_Order() {
		return sort_Order;
	}

	public void setSort_Order(String sort_Order) {
		this.sort_Order = sort_Order;
	}

	public String getSort_Gist() {
		return sort_Gist;
	}

	public void setSort_Gist(String sort_Gist) {
		this.sort_Gist = sort_Gist;
	}

	public Integer getPage_Currpage() {//计算出是多少页
		return page_Startclos / page_Pagelimit + 1;
	}

	public void setPage_Currpage(Integer page_Currpage) {
		this.page_Currpage = page_Currpage;
	}

	public String getsEcho() {
		return sEcho;
	}

	public void setsEcho(String sEcho) {
		this.sEcho = sEcho;
	}

	public static void fileDatatable(JSONArray jsondata, Datatable dataTable) {
		String[] th = new String[4];//定义排序数组，
		th[0] = "id";
		th[1] = "title";
		th[2] = "maname";
		th[3] = "";
		JSONArray jsonarray = jsondata;
		String sEcho = "", iDisplayStart = "", iDisplayLength = "", sSearch = "", sOrder = "", sGist = "";
		for (int i = 0; i < jsonarray.size(); i++) {
			JSONObject obj = (JSONObject) jsonarray.get(i);
			if (obj.get("name").equals("sEcho")) {//获取JSON中的sEcho
				sEcho = obj.get("value").toString();
				dataTable.setsEcho(sEcho);
				continue;
			}
			if (obj.get("name").equals("iDisplayStart")) {//获取第一行~
				iDisplayStart = obj.get("value").toString();
				dataTable.setPage_Startclos(Integer.parseInt(iDisplayStart));
				continue;
			}
			if (obj.get("name").equals("iDisplayLength")) {//获取每页显示多少
				iDisplayLength = obj.get("value").toString();
				dataTable.setPage_Pagelimit(Integer.parseInt(iDisplayLength));
				continue;
			}
			if (obj.get("name").equals("sSearch")) {//模糊查询的字段
				sSearch = obj.get("value").toString();
				dataTable.setSearch_Gist(sSearch);
				continue;
			}
			if (obj.get("name").equals("sSortDir_0")) {//参与排序的字段，他会给按照标题的顺序  给你1.2.3.4…你要自己清楚第一个是什么字段，第二个是什么字段。自己去处理
				sOrder = obj.get("value").toString();
				dataTable.setSort_Order(sOrder);
				continue;
			}
			if (obj.get("name").equals("iSortCol_0")) {//正序还是倒叙
				sGist = obj.get("value").toString();
				dataTable.setSort_Gist(th[Integer.parseInt(sGist)]);
				continue;
			}
		}
	}
}

这样辅助类的完成，那么

	@Override
	public PageUtil<Product> dTable(Pager page, Datatable d) {
		String hql=" from Product where 1 = 1";
		//如果有搜索条件的话。
		if(d.getSearch_Gist()!=null&&!d.getSearch_Gist().equals("")){
			hql+=" and ( title like '%"+d.getSearch_Gist()+"%' " +
//					" or id like '%"+d.getSearch_Gist()+"%' " +
//					" or proid like '%"+d.getSearch_Gist()+"%' " +
//					"  or url like '%"+d.getSearch_Gist()+"%' " +
//					"  or maname like '%"+d.getSearch_Gist()+"%' " +
					" ) ";
		}
		//如果有排序条件
		if(d.getSort_Gist()!=null&&!d.getSort_Gist().equals("")){
			hql+=" order by "+d.getSort_Gist()+" ";
			if(d.getSort_Order()!=null&&!d.getSort_Order().equals("")){
				hql+=" "+d.getSort_Order();
			}else{
				hql+=" desc";
			}
		}else{
			hql+=" order by id desc ";
		}
		return super.find(page, hql, null);
	}

这样datatable妥妥的了~

很多东西都没有说的很明白，因为，额。。。我比较懒。。。你们可以在下面评论，，，，