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

1.开发环境1.1 Struts2框架相关jar包1.2 json-lib-2.2.3-jdk15.jar1.3 jquery.dataTables.min.js和jQuery相关js2.编写目的   将DataTables插件与Struts2交互变得更简单易用,代码整洁化!3.核心代码3.1 前端封装DataTables插件的相关js代码datatables-pa
摘要由CSDN通过智能技术生成

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)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用方法: 支持JAVA和PHP两种后台。 PHP:直接将WebRoot下的文件放到php服务器上直接运行即可,记得启用sqlite3。 JAVA:修改user-manage.js,将访问后台的url由"datasource.php"改为"datasource.jsp",然后将WebRoot下的文件放到tomcat下直接运行。也可使用Eclipse直接导入此项目文件。 简要说明: 使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能直接适用于需要跟多种不同前端或其他业务交互的项目。本例子主要展示了自行封装请求参数和返回数据的用法,对后台的交互没有任何格式和命名限制。 基于Bootstrap 2.3.2,相关的其他件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版) 主要展现: 封装请求参数(查询、排序、分页,不再需要data、dataFilter和dataSrc) 封装返回数据 自定义查询参数 服务器分页 自行控制和自定义遮罩效果 生成自定义效果的单元格(在线离线) 生成复选框单元格 响应复选框选择事件 生成操作按钮单元格 响应操作栏按钮点击事件 响应行点击事件 渲染回调事件(默认选中第一行) 分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值