现在位置首页 / 项目实战 /正文

Jquery DataTable+jsp实现demo

作者: IT小兵 | 2014年10月18日| 热度:℃ | 评论: |参与:

由于本人一直是做.net的开发,所以很多例子都是asp.net相关的。今天在群(Jquery插件交流 346717337)里,有一位群主分享给我一个jsp的代码实例。

今天发布出来,希望对做java的同学有帮助。

首先不管什么语言去开发jquery datatable的功能,首先离不开3层。

1、Html结构:即使不固定table的html的结构,也需要在js中动态生成,这个有个例子:[Jquery DataTable 2个表格联动[jquery 实现多个DataTable并存,并css控制排版(asp.net服务)]

2、Jquery/js逻辑处理:接收服务端动态数据进行绑定到Datatable

3、就是服务端了。由asp.net 、jsp或者php等完成数据的访问并返回给js。一般采用都是web服务等方法。参考:[Jquery+ashx 实现ajax访问服务端json数据代码示例]

言归正传。

1、jsp组织html结构: 

<table class="table table-striped table-bordered table-hover"
 id="sample_1">
 <thead>
 <tr>
 <th>
 <input type="checkbox"
 data-set="#sample_1 .checkboxes" />
 </th>
 <th>
 账号
 </th>
 <th>
 姓名
 </th>
 <th>
 电子邮箱
 </th>
 <th>
 电话
 </th>
 <th>
 处理
 </th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>

就是建立一个表格。定义好表格头。

2、确定服务端返回数据的格式,这是一个json串。数据对应了html的表头

{
     "sEcho": 3,
     "iTotalRecords": 57,
     "iTotalDisplayRecords": 57,
     "aaData": [
         [
             "用户ID",
             "账号",
             "姓名",
             "电子邮箱",
             "电话"
         ],
         [
             "用户ID",
             "账号",
             "姓名",
             "电子邮箱",
             "电话"
         ],
         ...
     ] 
 }

3、上述的数据格式,需要服务端在处理完数据后组织.这里使用了一个数据转换类:

此类的属性是返回到前台必须的。
public class DataTableReturnObject {
        private int iTotalRecords;
        private int iTotalDisplayRecords;
        private String sEcho;
        private String[][] aaData;
       
        public DataTableReturnObject(int totalRecords, int totalDisplayRecords, String echo, String[][] d) {
                 this.setiTotalRecords(totalRecords);
                 this.setiTotalDisplayRecords(totalDisplayRecords);
                 this.setsEcho(echo);
                 this.setAaData(d);
        }
 
        public void setiTotalRecords(int iTotalRecords) {
                 this.iTotalRecords = iTotalRecords;
        }
 
        public int getiTotalRecords() {
                 return iTotalRecords;
        }
 
        public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
                 this.iTotalDisplayRecords = iTotalDisplayRecords;
        }
 
        public int getiTotalDisplayRecords() {
                 return iTotalDisplayRecords;
        }
 
        public void setsEcho(String sEcho) {
                 this.sEcho = sEcho;
        }
 
        public String getsEcho() {
                 return sEcho;
        }
 
        public void setAaData(String[][] aaData) {
                 this.aaData = aaData;
        }
 
        public String[][] getAaData() {
                 return aaData;
        }
}
2帮助类
public class BaseController {
        protected JSONResponse successed(Object obj) {
                 JSONResponse ret = new JSONResponse();
                 ret.setSuccessed(true);
                 ret.setReturnObject(obj);
                 return ret;
        }
}

4、java处理的数据访问及实现类:

实现类
public JSONResponse searchList(HttpServletRequest request , HttpServletResponse response ,String sEcho) throws Exception {
                 //convertToMap定义于父类,将参数数组中的所有元素加入一个HashMap
                 Map<Object, Object> objQueryMap = new HashMap<Object, Object>();
                 String jsondata  = request.getParameter("aoData");
                 JSONArray jsonarray = JSONArray.fromObject(jsondata);
                 String strDisplayStart ="";
                 String strDisplayLength="";
                 String[] arrayColumen = new String[new JSONUser().toArray().length];
                 int strSortId = 0;
                 String strSort = "";
                  for(int i=0;i<jsonarray.size();i++) //从传递参数里面选出待用的参数 
                { 
                    JSONObject obj=(JSONObject)jsonarray.get(i); 
                    String strName = (String)obj.get("name");
                    String strValue = obj.get("value").toString();
                    if(strName.equals("sEcho")){ 
                     sEcho=strValue; 
                    }
                    if(strName.equals("iDisplayStart")) {
                     strDisplayStart=strValue; 
                    }
                    if(strName.equals("iDisplayLength"))  {
                     strDisplayLength=strValue; 
                    }
                    if(strName.equals("sColumns")){
                      arrayColumen = obj.get("value").toString().split(",");
                     
                    } 
                       if(strName.startsWith("iSortCol_")){
                       strSortId = Integer.parseInt(strValue) ;//排序列数
                    }
                    if(strName.startsWith("sSortDir_")){
                       strSort = strValue;//排序的方向 "desc" 或者 "asc".
                    }
                 
                }
                  
                 Map<Object, Object> params = new HashMap<Object, Object>() ;
                 try {
                         params = managerService.getUserList(参数);
                 } catch (Exception e) {
                         // TODO Auto-generated catch block
                         e.printStackTrace();
                 }
                 String count = (String)params.get("COUNT");//总数
                 String[][] strData = (String[][])params.get("AO_DATA");//当前页显示的集合
                 return successed(new DataTableReturnObject(Integer.parseInt(count) , Integer.parseInt(count), sEcho, strData));
        }
4.业务逻辑查询方法
public Map<Object, Object> getUserList(Map<Object, Object> queryParams)
                         throws Exception {
       
                 String iCount =  总记录数;
                 // 将查询结果转换为一个二维数组
                 String[][] data = {};
                 if (lstUser != null && lstUser.size() > 0) {
                         int record = lstUser.size();
                         data = new String[record][];
                         for (int i = 0; i < lstUser.size(); i++) {
                                  User objUser = (User) lstUser.get(i);
                                  JSONUser jsonUser = new JSONUser();
                                  BeanUtils.copyProperties(jsonUser, objUser);
                                  data[i] = jsonUser.toArray();
                         }
                 }
                 queryParams.clear();// 情况map,重新设值使用
                 queryParams.put("AO_DATA", data);
                 queryParams.put("COUNT", iCount);
                 return queryParams;
        }

实体类:

JSON实体类
public class JSONUser {
        private int userId;
        private String account;
        private String name;
        private String password;
        private String email;
        private String isOnline;
        private String telephone;
 
        public int getUserId() {
                 return userId;
        }
        public void setUserId(int userId) {
                 this.userId = userId;
        }
        public String getAccount() {
                 return account;
        }
        public void setAccount(String account) {
                 this.account = account;
        }
        public String getEmail() {
                 return email;
        }
        public void setEmail(String email) {
                 this.email = email;
        }
        public String getIsOnline() {
                 return isOnline;
        }
        public void setIsOnline(String isOnline) {
                 this.isOnline = isOnline;
        }
        public String getTelephone() {
                 return telephone;
        }
        public void setTelephone(String telephone) {
                 this.telephone = telephone;
        }
       
        public void setName(String name) {
                 this.name = name;
        }
        public String getName() {
                 return name;
        }
       
        public void setPassword(String password) {
                 this.password = password;
        }
        public String getPassword() {
                 return password;
        }
       
        public String[] toArray() {
                 String[] ret = new String[5];
                 ret[0] = String.valueOf(this.userId);
                 ret[1] = this.account;
                 ret[2] = this.name;
                 ret[3] = this.email;
                 ret[4] = this.telephone;
                 return ret;
        }
}

注意存放的数组对象的属性必须与前端页面显示的列保持一样的个数


总结:整个逻辑上和一般的jquery Datatable的使用是一致。只是作者在json组织、转换上做了一些抽象处理。希望对大家有帮助。有帮助的话,请点个赞,顺便点个广告啥的。哈哈

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询