dataTables/ajax/struts2/jquery的用户管理表实现

先说要实现的效果。如图所示：

表中的数据是通过ajax发送请求到struts，之后ssh框架从oracle 数据库中取出的。本文主要讨论前台部分的实现，后台取数据等操作不在此展示。

首先，页面加载之后执行js代码：（不完整，括号请自行补全）

$(document).ready(function() {
    var table=$('#example').DataTable( {
    "ajax": {"url":"UserSearch.action",
    	"dataSrc":"userList"},
    "columns": [
        { "data": "userID" },
        { "data": "username" },
        { "data": "password" },
        { "data": "partment" },
        { "data": "privGrade" },
        { "data": "lastLogin" }, 
        { "defaultContent": "<button id='delete'>删除</button>" }
    ]
    } );

<span style="font-size:18px;"></pre><p></p><p>可以看出，加载后发送了UserSearch.action给后台，收到了userList对象。其格式为：<pre style="word-wrap: break-word; white-space: pre-wrap;">{"userList":[{"lastLogin":"2016-04-20 14:59:50","partment":"我的单位","password":"123456","privGrade":"超级管理员","userID":1,"username":"dutzjh"}]}</span>

然后将其按columns方式加载到datatable里。

之后就可动态显示，有几行都可以显示出来。

在之后实现了删除这个功能。由于要从数据库中删除，并且判断是否是当前登录用户，所以涉及一定的逻辑，均在后台完成。后台会将处理结果以字符串的形式存放在名叫result的变量中（String），以json的方式传回前台。

js代码如下：

$('#example tbody').on( 'click', '#delete', function () {
    	 var r=confirm("确认删除该用户？");
    	 if(r){
    		 var data=table.row($(this).parents('tr')).data();
    		 var re={
    				 "userShow.lastLogin":data.lastLogin,
    				 "userShow.partment":data.partment,
    				 "userShow.password":data.password,
    				 "userShow.privGrade":data.privGrade,
    				 "userShow.userID":data.userID,
    				 "userShow.username":data.username,  					
    		 };
    		 $.ajax({
    			 url:"DeleteUser.action",
    			 type: "post",dataType : "text",
    			 data:re,
    			 success: function(json){ 
    				 var obj = $.parseJSON(json);
    				 alert(obj.result);
    				 table.ajax.reload();
    				 table.draw();
    			 }
    		 });
    	 }
  } );
这部分代码加在上一部分的function（）之后的{}中。其流程为：首先将本行的数据存入data中，由于后台是用userShow这个对象接收的，所以需要将格式进行调整，作为re传递给后台。这次处理这个请求的是DeleteUser.action。得到数据就是处理结果，包括"删除成功"、"删除失败"、"不能删除当前用户"几种结果。再次提示用户操作结果。

之后需要刷新表格，显示新的查询结果。

居然在这个问题上卡了近一天，故写了本片博文，以提醒自己与大家注意。

之前只写了table.draw()方法，却无法刷新。试过各种修改后，发现原因是draw方法并不能重新启动ajax方法从后台获得新数据，需要手动加入。所以加入ajax的reload方法。一切搞定！

只写了 “删除”按钮，“修改”按钮等也可照此方式添加。