spring mvc + Jquery Data Table使用记录

最新推荐文章于 2019-06-04 10:41:00 发布

原创最新推荐文章于 2019-06-04 10:41:00 发布 · 952 阅读

1 ·

CC 4.0 BY-SA版权

心得专栏收录该内容

21 篇文章

订阅专栏

本文介绍了使用JqueryDatatable插件实现表格功能的过程，包括引入资源文件、前后端交互代码及美化技巧。针对美观需求对比了Jqgrid，并分享了在自定义checkbox方面的经验。

</pre></p><p>前言：做项目时需要用到表格插件，主要需要功能-查询、排序、分页、自适应，最最最重要当时是要美观。</p><p></p><p>选择：之前用过Jqgrid感觉外观一般，后来用了一个买回来的bootstrap框架KingAdmin里面有集成Jquery datatable和jqgrid，由于美观原因，想去研究一下Jquery datatable。</p><p>使用：有官网，但感觉介绍得不是很充足，于是上网看别人的参考，总结如下：</p><p>1、引入css和js，由于框架有集成，我就不需要重新引用，但这里还是贴出来：</p><p>      参考官方地址：http://datatables.club/manual/install.html</p><p>2、由于本次需要从后查询，因此js和后台代码很重要，贴出来：</p><p>js如下：</p><pre name="code" class="javascript">$(document).ready(function() {
			var fvTable;
			fvTable = $("#featured-datatable").dataTable({  
                "bProcessing": true, // 是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "${pageContext.request.contextPath}/cus/contentListJson.do",//这个是请求的地址
                "fnServerData": retrieveData, // 获取数据的处理函数
                "sScrollY": "100%",
            	"fnInitComplete": function() {
                    this.fnAdjustColumnSizing(true);
                 },
           		"aoColumnDefs": [
					{  "sWidth": "20px",
						"aTargets": [0]},
	       	        {
	       	           "sWidth": "45%",
	       	        	"aTargets": [1]},
       	        	{
 	       	           "sWidth": "45%",
 	       	        	"aTargets": [2]}
       	        ],
                "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，查询不到相关数据！",
                    "sEmptyTable": "表中无数据存在！",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                    "sSearch": "搜索",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                }
            });
			$(window).resize(function () {
	            fvTable.fnAdjustColumnSizing();
	        });
        });
		// 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
        function retrieveData( sSource,aoData, fnCallback) {
            $.ajax({
                url : sSource,//这个就是请求地址对应sAjaxSource
                data : {"aoData":JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
                type : 'post',
                dataType : 'json',
                async : false,
                success : function(result) {
                    fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                },
                error : function(msg) {
                }
            });
        }

java如下：

@RequestMapping(value={"/cus/contentListJson.do"})
	@ResponseBody
	public String showContentListJson(@RequestParam String aoData){
		JSONArray jsonarray = JSONArray.fromObject(aoData);
		 
	    String sEcho = null;
	    int iDisplayStart = 0; // 起始索引
	    int iDisplayLength = 0; // 每页显示的行数
	 
	    for (int i = 0; i < jsonarray.size(); i++) {
	        JSONObject obj = (JSONObject) jsonarray.get(i);
	        if (obj.get("name").equals("sEcho"))
	            sEcho = obj.get("value").toString();
	 
	        if (obj.get("name").equals("iDisplayStart"))
	            iDisplayStart = obj.getInt("value");
	 
	        if (obj.get("name").equals("iDisplayLength"))
	            iDisplayLength = obj.getInt("value");
	    }
	 
	    // 生成20条测试数据
	    List<String[]> lst = new ArrayList<String[]>();
	    for (int i = 0; i < 20; i++) {
	        String[] d = {""+i, "co1_data" + i, "col2_data" + i };
	        lst.add(d);
	    }
	     
	    JSONObject getObj = new JSONObject();
	    getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
	    getObj.put("iTotalRecords", lst.size());//实际的行数
	    getObj.put("iTotalDisplayRecords", lst.size());//显示的行数,这个要和上面写的一样
	    if(iDisplayLength>lst.size()){
	    	iDisplayLength = lst.size();
	    } 
	    getObj.put("aaData", lst.subList(iDisplayStart,iDisplayStart + iDisplayLength));//要以JSON格式返回
	    return getObj.toString();
	}

3、可以正常显示数据，但有个key point，就是表格中插入checkbox，Jquery datatable竟然没有集成，需要重写js代码。

结论：感觉比较麻烦，最后还是使用jqgrid。

最后：可能我研究不够透彻，有大神用得好的，请赐教！

贴上截图：真心好看