1.開發環境

1.1 Struts2框架相關jar包

1.2 json-lib-2.2.3-jdk15.jar

1.3 jquery.dataTables.min.js版本為1.10.8和jQuery相關js

2.編寫目的

   將DataTables外掛與Struts2互動變得更簡單易用，程式碼整潔化！

3.核心程式碼

3.1 前端封裝DataTables外掛的相關js程式碼

datatables-pack.js

/**
*處理DataTable的資料
*公共部分
*/
var DataTablePack = function(){

	//漢化分頁條
	var language = {
		paginate:{
			first:'首頁',
			last:'末頁',
			previous:'上一頁',
			next:'下一頁'
		},
		lengthMenu:'顯示 _MENU_ 條',
		zeroRecords:'沒有檢索到有效資料！',
		info:'顯示 _START_ 到 _END_ 條記錄',
		infoEmpty:'沒有檢索到有效資料！',
		search:'查詢：',
		processing:'正在載入資料，請稍候...',
		infoFiltered:'共計 _TOTAL_ 條記錄'
	}
	
	/* 全選以及選中效果功能  */
	function checkAll(table){
		//全選功能
		table.find('.checkall').change(function () {
			var allCheck = table.find('tbody input[type=checkbox]');
			if(jQuery(this).is(":checked")){
				allCheck.each(function(){ 
					jQuery(this).attr('checked',true);
					jQuery(this).parent().addClass('checked');	//used for the custom checkbox style
				});
			}else{
				allCheck.each(function(){ 
					jQuery(this).attr('checked',false);
					jQuery(this).parent().removeClass('checked');	//used for the custom checkbox style
				});
			}
        });

		//選中效果
        table.on('change', 'tbody tr .check', function () {
            $(this).parents('tr').toggleClass("active");
            if(jQuery(this).is(":checked")){
            	jQuery(this).attr('checked',true);
            	jQuery(this).parent().addClass('checked');
            }else{
            	jQuery(this).attr('checked',false);
            	jQuery(this).parent().removeClass('checked');
            }
        });
		
       // table.parent().parent().find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
	}
	
	/** 公開呼叫方法 **/
	var DataTablePublic = {
		/* 處理處理靜態資料  */
		baseTable:function(table){
			var oTable = table.dataTable({
				'language':language,//漢化工具條
				'lengthMenu':[10,20,30,50,100],//顯示每頁大小的下拉框中的選項
				'dom': "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'f><'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
				'pagingType':'full_numbers',//分頁樣式
				'columnDefs':[{
					'targets':[0,1],
					'orderable':false
				}],//預設列引數
				"order":[
			        [2, "asc"]
			    ] //預設排序的列
			});
			
			checkAll(table);//全選功能
	        
			return oTable;
		},
		/* 即時後臺獲取資料*/
		serverTable:function(table,url,reqData,columns,startNum){
			//alert(url);
			var oTable = table.dataTable({
				'ajax':{
					dataType:'json',
					/////contentType:'application/json',
					type:'post',//更改Ajax的請求方式 
					url:url,//從一個ajax資料來源讀取資料給表格內容
					data:function(aoData){
						reqData['dtJson'] = JSON.stringify(aoData); 
						return reqData;
					},
					//data:'{"username":"admin","userpwd":"123456"}',
					error:function (resp){
						alert(JSON.stringify(resp));
					}//新增額外的引數傳送到伺服器
				},
				'serverSide':true,//是否開啟伺服器模式
				'stateSave':true,//儲存狀態 - 在頁面重新載入的時候恢復狀態（頁碼等內容）
				'processing':true,//當表格處在處理過程（例如排序）中時，啟用或者禁止 'processing'指示器的顯示。
				'displayStart':startNum,//初始化顯示的時候從第幾條資料開始顯示(一開始顯示第幾頁)
				'columns':columns,
				'language':language,//漢化工具條
				'lengthMenu':[10,20,30,50,100],//顯示每頁大小的下拉框中的選項
				'dom': "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'f><'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
				'sPaginationType':'full_numbers',//分頁顯示所有按鈕
				'columnDefs':[{
					'targets':[0,1],
					'orderable':false
				}],//預設列引數
				"order":[
			        [2, "asc"]
			    ] //預設排序的列
			});
			
			checkAll(table);//全選功能
	        
			return oTable;
		}
	};
	
	return DataTablePublic;
	
}();	
 

3.2 頁面使用DataTables外掛，先引入3.1的js檔案

jQuery(document).ready(function(){

    var table = jQuery('#protable');

    var columns = [
        {
            'data':null,
            'render':function(data,type,full){
                var content = '<div class="checker"><span>';
                    content += '<input class="check" type="checkbox" value="'+data.id+'">';
                    content += '</span></div>';
                return content;
            }
        },
        {'data':'name'},
        {'data':'url'},
        {'data':'descmark'},
        {'data':'logopath'},
        {'data':'role_type'},
        {
            'data':null,
            'render':function(data,type,full){
                var content = '<a href="javascript:;" class="btn default btn-xs purple">';
                    content += '<i class="fa fa-edit"></i> Edit </a>';
                return content;
            }
        }
    ];
    var reqData = {"menu.name":"admin","menu.url":"123456"};
    DataTablePack.serverTable(table,'manage/menuajaxShow.action',reqData,columns,1);
});
 

3.3 後端封裝DataTables外掛引數實體

      3.3.1 DataTables.java

package llcrm.base.action.datatables;

import java.util.ArrayList;
import java.util.List;

/**
 * <p>Class:DataTables</p>
 * <p>Description: DataTables外掛引數物件</p>
 * @author XQL
 * @Date 2015年9月9日 下午5:40:33
 */
public class DataTables {

	//請求傳遞引數
	private int draw = 0;
	private List<Columns> columns = new ArrayList<Columns>();
	private List<Order> order = new ArrayList<Order>();
	private int start;
	private int length;
	private Search search = new Search();
	
	//相應傳遞引數
	private Object data;
	private int recordsTotal = 0;
	private int recordsFiltered = 0;
	
	public int getDraw() {
		return draw;
	}
	public void setDraw(int draw) {
		this.draw = draw;
	}
	public List<Columns> getColumns() {
		return columns;
	}
	public void setColumns(List<Columns> columns) {
		this.columns = columns;
	}
	public List<Order> getOrder() {
		return order;
	}
	public void setOrder(List<Order> order) {
		this.order = order;
	}
	public int getStart() {
		return start;
	}
	public void setStart(int start) {
		this.start = start;
	}
	public int getLength() {
		return length;
	}
	public void setLength(int length) {
		this.length = length;
	}
	public Search getSearch() {
		return search;
	}
	public void setSearch(Search search) {
		this.search = search;
	}
	public Object getData() {
		return data;
	}
	public void setData(Object data) {
		this.data = data;
	}
	public int getRecordsTotal() {
		return recordsTotal;
	}
	public void setRecordsTotal(int recordsTotal) {
		this.recordsTotal = recordsTotal;
	}
	public int getRecordsFiltered() {
		return recordsFiltered;
	}
	public void setRecordsFiltered(int recordsFiltered) {
		this.recordsFiltered = recordsFiltered;
	}
	@Override
	public String toString() {
		return "DataTables [draw=" + draw + ", columns=" + columns.get(0).toString() + ", order=" + order.get(0).toString() + ", start=" + start
				+ ", length=" + length + ", search=" + search + ", data=" + data + ", recordsTotal=" + recordsTotal
				+ ", recordsFiltered=" + recordsFiltered + "]";
	}
}
 

      3.3.2 Columns.java

package llcrm.base.action.datatables;

/**
 * <p>Class:Columns</p>
 * <p>Description: 包裝DataTables欄位資訊</p>
 * @author XQL
 * @Date 2015年9月9日 下午6:10:23
 */
public class Columns {
	private String data;
	private String name;
	private boolean searchable;
	private boolean orderable;
	private Search search;
	public String getData() {
		return data;
	}
	public void setData(String data) {
		this.data = data;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public boolean isSearchable() {
		return searchable;
	}
	public void setSearchable(boolean searchable) {
		this.searchable = searchable;
	}
	public boolean isOrderable() {
		return orderable;
	}
	public void setOrderable(boolean orderable) {
		this.orderable = orderable;
	}
	public Search getSearch() {
		return search;
	}
	public void setSearch(Search search) {
		this.search = search;
	}
	@Override
	public String toString() {
		return "Columns [data=" + data + ", name=" + name + ", searchable=" + searchable + ", orderable=" + orderable
				+ ", search=" + search.toString() + "]";
	}
	
}

      3.3.3 Order.java

package llcrm.base.action.datatables;

/**
 * <p>Class:Order</p>
 * <p>Description: 包裝DataTables排序資訊</p>
 * @author XQL
 * @Date 2015年9月9日 下午6:11:17
 */
public class Order {
	private int column;
	private String dir;
	public int getColumn() {
		return column;
	}
	public void setColumn(int column) {
		this.column = column;
	}
	public String getDir() {
		return dir;
	}
	public void setDir(String dir) {
		this.dir = dir;
	}
	
	@Override
	public String toString() {
		return "Order [column=" + column + ", dir=" + dir + "]";
	}
	
}

       3.3.4 Search.java

package llcrm.base.action.datatables;

/**
 * <p>Class:Search</p>
 * <p>Description: 包裝DataTables查詢資訊</p>
 * @author XQL
 * @Date 2015年9月9日 下午6:11:54
 */
public class Search {
	private String value;
	private boolean regex;
	
	public String getValue() {
		return value;
	}
	public void setValue(String value) {
		this.value = value;
	}
	public boolean isRegex() {
		return regex;
	}
	public void setRegex(boolean regex) {
		this.regex = regex;
	}
	
	@Override
	public String toString() {
		return "Search [value=" + value + ", regex=" + regex + "]";
	}
	
}

3.4 將前端傳遞的Json字串[包含了DataTables外掛的引數和自定義引數]封裝成DataTables物件

注意：這裡利用了struts2的自定義型別轉換器

DataTablesConvert.java

package llcrm.base.action.convert;

import java.util.HashMap;
import java.util.Map;

import com.opensymphony.xwork2.conversion.impl.DefaultTypeConverter;

import llcrm.base.action.datatables.Columns;
import llcrm.base.action.datatables.DataTables;
import llcrm.base.action.datatables.Order;
import net.sf.json.JSONObject;

/**
 * <p>Class:DataTablesConvert</p>
 * <p>Description: 將前端的DataTables外掛轉為Datatables物件</p>
 * @author XQL
 * @Date 2015年9月9日 下午5:39:39
 */
public class DataTablesConvert extends DefaultTypeConverter{

	@Override
	@SuppressWarnings("rawtypes")
	public Object convertValue(Map context, Object value, Class toType){
		
		String json = ((String[])value).length > 0 ? json = ((String[])value)[0] : ""; 

		System.out.println("|-00-|"+json);
		
		DataTables dt = null;
		
		if(toType == DataTables.class){
			
			JSONObject jsonobj = JSONObject.fromObject(json);
			
			Map<String, Class> clsMap = new HashMap<String, Class>();
			
			clsMap.put("columns", Columns.class);
			
			clsMap.put("order", Order.class);
			
			dt = (DataTables)JSONObject.toBean(jsonobj,DataTables.class,clsMap);
		
			System.out.println("|-01-|"+dt.toString());
		}
		
		return dt;
	}
}

3.5 配置檔案以及後端呼叫DataTables的引數，以及各種應用

BaseAction-conversion.properties

dtJson = llcrm.base.action.convert.DataTablesConvert

BaseAction.java

package llcrm.base.action;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.apache.struts2.util.ServletContextAware;

import com.opensymphony.xwork2.ActionSupport;

import llcrm.base.action.datatables.DataTables;

public class BaseAction extends ActionSupport  implements ServletRequestAware,ServletResponseAware, ServletContextAware{
	private static final long serialVersionUID = -7588102526595752037L;

	public  HttpServletRequest request;
	
	public HttpServletResponse response;
	
	public ServletContext  context;
	
	private DataTables dtJson;
	
	public DataTables getDtJson() {
		return dtJson;
	}
	public void setDtJson(DataTables dtJson) {
		this.dtJson = dtJson;
	}
	
	public void setServletRequest(HttpServletRequest request) {
		 this.request = request;
	}
	public void setServletResponse(HttpServletResponse response) {
		  this.response = response;
	}
	public void setServletContext(ServletContext context) {
	   this.context = context;
	}
}

AdminMenuAction.java

package llcrm.admin.action;


import java.util.ArrayList;
import java.util.List;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import llcrm.base.action.BaseAction;
import llcrm.base.action.datatables.Columns;
import llcrm.base.action.datatables.Order;
import llcrm.entity.Lc_AdminMenu;
import llcrm.service.Lc_AdminMenuService;



@Controller("adminMenuAction")
@Scope("prototype")
public class AdminMenuAction extends BaseAction {
	private static final long serialVersionUID = 1L;
	private Lc_AdminMenuService lc_AdminMenuService;
	public Lc_AdminMenu menu;
	
	public String gotoPage(){
		
		return "page";
	}
	
	public String ajaxShow(){
		
		System.out.println(menu.getName()+"|||"+menu.getUrl());
		
		System.out.println("查詢：");
		System.out.println("檢索條件："+super.getDtJson().getSearch().getValue());
		System.out.println("檢索條件是否匹配正則表示式："+super.getDtJson().getSearch().isRegex());
		System.out.println("排序：");
		for(Order ord : super.getDtJson().getOrder()){
			List<Columns> cols = super.getDtJson().getColumns();
			System.out.println("排序欄位："+cols.get(ord.getColumn()).getData());
			System.out.println("排序方式："+ord.getDir());
		}
		
		List<Lc_AdminMenu> list = new ArrayList<Lc_AdminMenu>();
		
		for(int i=0;i<10;i++){
			Lc_AdminMenu lc_menu = new Lc_AdminMenu();
			lc_menu.setDescmark("descmark"+i);
			lc_menu.setId(i);
			lc_menu.setLogopath("logopath"+i);
			lc_menu.setName("name"+i);
			lc_menu.setParent(null);
			lc_menu.setRole_type(i);
			lc_menu.setUrl("url"+i);
			list.add(lc_menu);
		}
		
		super.getDtJson().setData(list);
		super.getDtJson().setRecordsFiltered(20);
		super.getDtJson().setRecordsTotal(100);
		
		return "json";
	}
	

	
	public Lc_AdminMenu getMenu() {
		return menu;
	}
	public void setMenu(Lc_AdminMenu menu) {
		this.menu = menu;
	}
}

注意事項：BaseAction的屬性dtJson物件的名稱和datatables-pack.js裡的dtJson的名稱一致.