Struts2+DataTables插件整合，封装交互Json数据

最新推荐文章于 2026-06-24 03:24:01 发布

原创

最新推荐文章于 2026-06-24 03:24:01 发布 · 5k 阅读

本文介绍了如何在Struts2框架下整合DataTables插件，简化前后端交互，使代码更加整洁。主要内容包括开发环境的配置，如Struts2相关jar包、json库和jQuery，以及DataTables的版本。文章重点讲解了核心代码，包括前端的datatables-pack.js封装，后端的DataTables、Order和Search类，利用Struts2的自定义类型转换器DataTablesConvert进行数据转换。同时，还提及了配置文件BaseAction-conversion.properties和BaseAction.java中的相关设置。

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,//当表格处在处理过程（例如排序）中时，启用或