DataTable的一些用法

最新推荐文章于 2021-07-21 15:30:30 发布
最新推荐文章于 2021-07-21 15:30:30 发布
阅读量396 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44696786/article/details/105215686
版权

DataTable的一些用法

一：DataTable根据条件隐藏某一列或者几列有两种情况，第一种：直接根据DataTable自带的方法来隐藏，第二种是根据<c:if>来实现
column([-1])表示倒数第一列，
从前往后0，1，2，3，从后往前 -1，-2，-3

if(${drawingtype} =='01'){
	$('#zcInfo-user').DataTable().column([-1]).visible( false );
	$('#zcInfo-user').DataTable().column([-1]).visible( false );
}

第二种<c:if>

<c:if test="${drawingtype=='05'}">
     <th>所</th>
	<th>所</th>
	<th class="hidden-480">楼层</th>
</c:if>
<c:if test="${drawingtype=='05'}">
    {"data": "Name","sDefaultContent" : ""},
    {"data": "Name","sDefaultContent" : ""},
    {"data": "floor","sDefaultContent" : "","sClass" : "hidden-480"},
</c:if>

二：DataTable中的下载功能参照
https://editor.csdn.net/md/?articleId=105201817
三：DataTable的初始化AjaxData

function ajaxData(data, callback, settings ) {
		function handleAjaxError( xhr, textStatus, error ) { 
    	    if ( textStatus === 'timeout' ) { 
    	    	layer.alert('查询超时，请稍后再试', {
    	    	    skin: 'layui-layer-lan',
    	    	    icon: 5,
					closeBtn: 0,
    	    	    anim: 3 //动画类型
    	    	  }); 
    	    } else {  
    	    	layer.alert('服务器未响应，请稍后再试', {
    	    		skin: 'layui-layer-lan',
    	    		icon: 5,
 					closeBtn: 0,
     	    	    anim: 3 //动画类型
    	    	 }); 
    	    }  
    	    $('#dynamic-table').dataTable().fnProcessingIndicator( false ); 
    	}  
     
		 //封装请求参数
		 var param = {};
		 param.size = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
		 //param.start = data.start;//开始的记录序号
		 param.page = (data.start / data.length); //当前页码
		 var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组//列表上面的表单中的值获取到之后封装
		 formData.forEach(function (e) {//遍历赋值
		     param[e.name] = e.value;
		 });
		//有时候param的值也可能不是从表单里面获取到的，可能是后台传过来的值，看着两种情况随机而用
		param['key'] ="${key}";
      	param['drawingtype'] ="${drawingtype}";
		 //ajax请求数据 
		 $.ajax({
		     type: "POST",
		     url: "basis/build/list",
		     cache: false,  //禁用缓存
		     data: param,  //传入组装的参数
		     dataType: "json",
		     error:handleAjaxError,
		     success: function (result) {
		         //console.log(result);
		         //封装返回数据
		         var returnData = {};
		         returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
		         returnData.recordsTotal = result.totalElements;//返回数据全部记录
		         returnData.recordsFiltered = result.totalElements;//后台不实现过滤功能，每次查询均视作全部结果
		         returnData.data = result.content;//返回的数据列表
		         //console.log(returnData);
		         //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
		         //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
		         callback(returnData);
		     }
		});
	}

列表查出来之后就进行初始化

var myTable = $("#dynamic-table").DataTable({      
				language:{"url":"static/lang/dataTables.zh_CN.json"},  //提示信息
	            autoWidth: true,  //禁用自动调整列宽
	            processing: true,  //隐藏加载提示,自行处理
	            serverSide: true,  //启用服务器端分页
	            searching: false,  //禁用原生搜索
	            orderMulti: false,  //启用多列排序
	            ordering: false, //排序操作在服务端进行，所以可以关了。
	            aLengthMenu: [[20, 50, 100, 200], [20, 50, 100,200]],
	            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
	            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
	            pagingType: "full_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
	            scrollX: true,
	            fixedColumns:   {
	                leftColumns: 3,
	                rightColumns: 4
	            },
	            ajax:ajaxData, 
	            //列表表头字段
	            columns: [
		            {"data": "Name","sDefaultContent" : ""},
				    {"data": "Name","sDefaultContent" : "",
				    render: function(data,type,row,meta){
	                		if (data=='1'){
	                			return '<i class=\"ace-icon fa fa-check-circle bigger-120 green tooltip-success \" data-rel="tooltip" data-placement="left" title="已入账" ></i>';
	                		}else if (data=='0'){
	                			return '<i class=\"ace-icon fa fa-ban bigger-120 red tooltip-error\" data-rel="tooltip" data-placement="left" title="未入账" ></i>';
	                		}
	                		else{
	                			return ;
	                		}
	                	}	
	                	}	
					},
				    {"data": "floor","sDefaultContent" : "","sClass" : "hidden-480"},
				    {"data": null, "sClass" : "center","width":"80px"},
	            	{"data": null,"sClass" : "center","width":"80px"},
	            	{"data": null,"sClass" : "center","width":"200px"}
				    ],//操作按钮
	            columnDefs: [
	             {
	                 targets: 0,
	                 defaultContent: "<label class=\"pos-rel\">"
									+"<input type=\"checkbox\" class=\"ace\" />"
									+	"<span class=\"lbl\"></span>"
									+"</label>"
	             },{
	            	 targets:-1,
	                 defaultContent:"<div class=\"btn-group\">"
	                	 			+	"<button id=\"detail-row\" class=\"btn btn-xs btn-warning\" title=\"详细\">"
									+		"<i class=\"ace-icon fa fa-search-plus bigger-120\">详细</i>"
									+	"</button>"
			                	 	+	"<button id=\"edit-row\" class=\"btn btn-xs btn-success\" title=\"修改\">"
									+		"<i class=\"ace-icon fa fa-pencil bigger-120\">修改</i>"
									+	"</button>"
									+	"<button id=\"del-row\" class=\"btn btn-xs btn-danger\" title=\"删除\">"
									+		"<i class=\"ace-icon fa fa-trash-o bigger-120\">删除</i>"
									+	"</button>"		
									+ "</div>"
	             },{
	            	 targets:-2,
	                 defaultContent:"<div class=\"btn-group\">"
	                	 			+	"<button id=\"upload-row\" class=\"btn btn-xs btn-purple\" title=\"上传\">"
									+		"<i class=\"ace-icon fa fa-upload bigger-110 \">上传</i>"
									+	"</button>"
									+ "</div>"
	             },{
	            	 targets:-3,
	                 defaultContent:"<div class=\"btn-group\">"
	                	 			+	"<button id=\"detaillm-row\" class=\"btn btn-xs btn-info\" title=\"查看\">"
									+		"<i class=\"ace-icon fa fa-search-plus bigger-120 \"></i>"
									+	"</button>"
									+ "</div>"
	             }],
	             fnDrawCallback: function (oSettings) {
	            	 $('[data-rel=tooltip]').tooltip();
	             },
	             initComplete: function(settings, json) {
	            	 $('[data-rel=tooltip]').tooltip();
	              }
	        });
	        $.fn.dataTable.ext.errMode = 'none'; //不显示任何错误信息  
			//查询            
	        $("#btn-query").on("click", function () {
	            myTable.draw();//查询后不需要保持分页状态，回首页
	        });
			//重置
	        $("#btn-reset").on("click",function(){
				$('.select2').val(null).trigger("change");
			});
			//checkbox全选
	        $("#checkAll").on("click", function () {
	            if ($(this).prop("checked") === true) {
	                $("input[name='checkList']").prop("checked", $(this).prop("checked"));
	                //$("#dataTable tbody tr").addClass('selected');
	                $(this).hasClass('selected')
	            } else {
	                $("input[name='checkList']").prop("checked", false);
	                $("#dataTable tbody tr").removeClass('selected');
	            }
	        });
				    
		//操作按钮#table是table的id
		$("#table tbody").on("click", "#upload-row", function () {
	        	var data = myTable.row($(this).parents('tr')).data();
	        	var timestamp = (new Date()).valueOf(); 
				$.ajaxSetup ({ 
				    cache: false 
				});
			    var timestamp = (new Date()).valueOf();                    
			    var url ='${ctx}/aaa/bbb/aaa?key='+data.key+'&timestamp='+timestamp+'&type=03';
			    $.post(url, {}, function(str){
			    	layer.open({
						content: str,
					    type: 1,
					    title : '图片/证照上传',
			            skin : "layui-layer-lan",
			            border : [1],
			            btn : ['取消'],
			            closeBtn:1,
			            maxmin: true,
			            fixed:true,
			            notmin:false,
			            scrollbar:false,
			            area : ['86%','80%'],
			            end: function () {
			            	$('#table').DataTable().draw( false );
			            }
					});
				});   
	        });	
	        //或者
	        //展示
	        $("#table tbody").on("click", "#detail-row", function () {
	        	var data = myTable.row($(this).parents('tr')).data();
	        	$("#showBody").load('${ctx}/aaa/bbb/aaa?key='+data.key, function (responseTxt, statusTxt, xhr) {
	        		$('#showTitle').html('详情');
	        		$('#showFooter').html('<button class="btn" data-dismiss="modal"><i class="ace-icon fa fa-undo bigger-110"></i>取消</button>');
	        		$('#showModal').modal('show');
	            });
	        });	 
		/*  删除操作 */
	        $("#table tbody").on("click", "#del-row", function () {
	        	var data = myTable.row($(this).parents('tr')).data();
	        	swal({  
	    			title: "您确定删除此建筑物吗？",
	                type: 'warning',  
	                showCancelButton: true,  
	                confirmButtonText: '确定',
	                cancelButtonText: "取消"
	            },function(){
		        	$.ajax({
		    			//提交数据的类型 POST GET
		    			type:"POST",
		    			//提交的网址
		    			url:"${ctx}/aaa/bbb/ccc",
		    			data:{"key": data.key},
		    			//返回数据的格式
		    			datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
		    			//成功返回之后调用的函数             
		    			success:function(data){
		    				
		    				if (data.code == 0) {
		    					 layer.alert('删除成功', {
    			    	    	    skin: 'layui-layer-lan',
    			    	    	    icon: 1,
    								closeBtn: 0,
    			    	    	    anim: 3 //动画类型
	 	                         });  
	    					} else {
	    						 layer.alert('删除失败,'+data.msg, {
	                 	    	    skin: 'layui-layer-lan',
	                 	    	    icon: 5,
	             					closeBtn: 0,
	                 	    	    anim: 3 //动画类型
	                 	    	 }); 
	    					}   				
		    				myTable.draw();//查询后不需要保持分页状态，回首页
		    			},
		    			//调用出错执行的函数
		    			error: function(data){
		    				//请求出错处理
		    				layer.alert('系统在执行删除操作时出现错误', {
	              	    	    skin: 'layui-layer-lan',
	              	    	    icon: 5,
	          					closeBtn: 0,
	              	    	    anim: 3 //动画类型
	              	    	 });  
		    				
		    			}
		    		});
	            });
weixin_44696786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【C#语言】DataGridView隐藏行列
文布斯的博客
08-06 4057
获取或设置一个值，指示该列是否可见。在实践中，有时需要将表中数据隐藏。
C#DataGridView 实现列自定义显示顺序/宽度/隐藏
最新发布
nininna的博客
01-25 1223
自定义DataGridView列的显示顺序、显示宽度以及过滤显示。
datatable 隐藏列
03-20
NULL 博文链接：https://feiyezi.iteye.com/blog/763314
用dataTable的initComplete实现隐藏表格某些列，翻页后隐藏失效的解决办法
weixin_44604434的博客
07-21 932
用dataTable的initComplete实现隐藏表格的某些列，翻页后失效问题解决办法
datatable 隐藏列注意事项
HouYing
08-23 4921
stateSave : true, // 保存状态     这个会使得隐藏列失效                                                visible : false  //隐藏列
C# DataTable使用方法详解
01-20
在项目中常常常使用到DataTable,假设DataTable使用得当，不仅能使程序简洁有用，并且可以提高性能，达到事半功倍的效果，现对DataTable的使用技巧进行一下总结。 1、添加引用 using System.Data; 2、创建表 //创建...
C# DataTable常见用法汇总
09-07
如果已经有了一个`DataRow`对象，可以使用`Rows.Add`方法将其添加到`DataTable`中。`ItemArray`属性可以返回或设置行的所有值： ```csharp DataRow dr = ...; // 已存在的DataRow dt.Rows.Add(dr.ItemArray); `...
jQuery插件DataTable使用方法详解(.Net平台)
11-27
上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件——DataTable（简称DT），很好用。 DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。 一.使用DT，需要以下支持 js:jq+jquery.dataTables.min....
datatable使用方法
04-22
本教程将深入探讨`DataTable`的使用方法，以`SpringBoot`和`DataTables Grid`为例，帮助你理解和实践其核心功能。 ### DataTables 的基本使用 `DataTables` 是一个基于jQuery的插件，能够将普通的HTML表格转变为...
Jquery dataTable显示指定列
08-09
该demo的最终实现效果是：有一个选择弹框，在弹框中选择想要显示的列，最后使用Jquery dataTable插件显示出用户想要显示的列
DataTable中隐藏列栏位
brian0031的专栏
11-24 4107
DataTable dt = new DataTable(); dt.Columns.Remove("p_o");
【踩坑】Datatable如何获取隐藏列
03-06 1110
鄙人前端小白，用词可能不专业，仅仅分享一下经验。 我们在Datatable的使用过程中，常常会需要获取隐藏列的值。但通过传统的DOM操作是无法获取的。那如何是好？ 我参考了一个老哥的博客，他的解法如下： //先拿到点击的行号 var rowIndex = $(this).parents("tr").index(); //此处拿到隐藏列的id var id = $('...
datatable的动态列隐藏按钮及实现方式
MelodyFreedom的博客
05-31 1万+
以下参照datatable中文网api中的例子编写而成。 1、添加按钮事件                                                                                                       服务器名称      IP      CPU/内存      数据盘大小      操作系统
C# DataTable去除某列重复的数据
weixin_34324081的博客
11-03 2965
去除DataTable中重复的数据需要用到DataView，代码如下：DataView dv = new DataView(_dt);//_dt是一个DataTable类型的变量_dt = dv.ToTable(true, "列名1,列名2,列名3");//第一个参数为true,去除重复数据，false不去除。//第二个参数需要显示的字段_dt=dv.ToTable(...
datatable 动态显示/隐藏列
03-20 891
这个例子演示了column().visible()方法来隐藏显示列，通过点击列按钮动态切换 <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th&gt...
jquery dataTable 隐藏某列
tongnian_2010的专栏
06-10 3072
一、根据需求来隐藏不同的列    主要解决不同角色或者人员看到不同的表格数据。    解决办法：利用绘画表格前的回调函数，代码如下：  fnInitComplete: function(oSettings, json) { if(roleType==1){ //条件判断 renow.fnSetColumnVis( 6,
datatable隐藏列同时可以获取列数据
热门推荐
qq_26747571的博客
09-13 1万+
datatalbe中有些数据是不想显示出来的，使用"aoColumnDefs"属性能够实现隐藏列，但是这种方法不能获得隐藏列的数据
c#中的datatable select用法
06-28
### 回答1： C#中的DataTable.Select方法是用于从DataTable中选择符合指定条件的行的方法。它的语法如下： DataTable.Select(string filterExpression, string sortExpression, DataViewRowState rowState) 其中，filterExpression是用于筛选行的表达式，sortExpression是用于排序的表达式，rowState是用于指定行状态的枚举值。 例如，以下代码将从名为"myTable"的DataTable中选择所有"Age"列大于等于18的行，并按照"Name"列升序排序： DataTable myTable = new DataTable(); // 假设myTable已经填充了数据 DataRow[] selectedRows = myTable.Select("Age >= 18", "Name ASC"); 这样，selectedRows数组中就包含了符合条件的行。 ### 回答2： 我作为一名AI语言模型，对于"c"这个问题需要进一步的了解。根据上下文，我猜测可能是在讨论计算机科学中的编程语言C。因此，我将围绕这个主题展开回答。 C是一种高级编程语言，最初由Dennis Ritchie于1972年在贝尔实验室开发。它在计算机科学和工程领域中得到了广泛的应用，包括操作系统，编译器，数据库，游戏等等。C语言被称为高级语言，因为它比机器语言更易于编写和理解，同时又比其他高级语言（如Java、Python）更接近底层机器指令。 C语言的特点是灵活性强，运行速度快，可移植性好，所以在系统底层开发中应用广泛。许多经典的操作系统（如Unix，Linux和Windows）和库都是用C语言编写的。此外，许多编程语言（如C++和Objective-C）都是在C语言的基础上开发的。 C语言也有一些缺点，例如它对程序员的要求非常高，需要精确的语法和细节，否则程序可能会出错。此外，C语言相对较底层，需要更多的代码实现与其他高级语言相比相同的功能。 总之，C语言在计算机科学中的重要性不言而喻。尽管现在出现了许多其他优秀的编程语言，C语言在掌握系统底层编程，提高编程能力和理解计算机工作原理方面仍然是一个不可或缺的工具。 ### 回答3： 我很抱歉，但是您没有给出问题或提示，我无法提供具体的回答。如果您能提供更多信息，我将非常乐意为您提供帮助和支持。如果您需要任何其他帮助，请随时与我联系。谢谢！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值