关于 dataTable 组件使用

Posted 2022-10-18 wukongk

偶然发现一个叫 dataTable  的组件，觉得很好用，于是研究了一番，下面是代码

var lang = 
				"sProcessing": "处理中...",
				"sLengthMenu": "每页 _MENU_ 项",
				"sZeroRecords": "没有匹配结果",
				"sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
				"sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
				"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
				"sInfoPostFix": "",
				"sSearch": "搜索:",
				"sUrl": "",
				"sEmptyTable": "表中数据为空",
				"sLoadingRecords": "载入中...",
				"sInfoThousands": ",",
				"oPaginate": 
					"sFirst": "首页",
					"sPrevious": "上页",
					"sNext": "下页",
					"sLast": "末页",
					"sJump": "跳转"
				,
				"oAria": 
					"sSortAscending": ": 以升序排列此列",
					"sSortDescending": ": 以降序排列此列"
				
			;
			var table = $("#sample").dataTable(
					language:lang,  //提示信息
					autoWidth: false,  //禁用自动调整列宽
					processing: true,  //隐藏加载提示,自行处理
					serverSide: true,  //启用服务器端分页
					searching: true,  //禁用原生搜索
					search: 
				    "search": ""
				  ,
					ordering:false,
					renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
					lengthChange: false,
					pageLength:15,
					rowId: '_id',
					pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
					columnDefs: [
						"targets": 'nosort',  //列的样式名
						"orderable": false    //包含上样式名‘nosort’的禁止排序
					],
					ajax: function (data, callback, settings) 
						//封装请求参数
						var param = ;
						param.keyword = data.search.value;
						param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
						param.start = data.start;//开始的记录序号
						param.page = (data.start / data.length)+1;//当前页码
						//console.log(param);
						//ajax请求数据
						$.ajax(
							type: "POST",
							url: "/payment/result",
							cache: false,  //禁用缓存
							data: param,  //传入组装的参数
							dataType: "json",
							success: function (result) 
								//console.log(result);

								//封装返回数据
								var returnData = ;
								returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
								returnData.recordsTotal = result.totalCount;//返回数据全部记录
								returnData.recordsFiltered = result.totalCount;//后台不实现过滤功能，每次查询均视作全部结果
								returnData.data = result.payment;//返回的数据列表
								//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
								//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
								callback(returnData);
							
						);
					,
					//列表表头字段
					columns: [ 
						  
							className: "center",  
							orderable : false,  
							bSortable : false,  
							data : "_id",  
							render : function(data, type, row, meta)   
								var content = '<label class="position-relative">';  
								content += '<input type="checkbox" class="ace" value="' + data + '" />';  
								content += '<span class="lbl"></span>';  
								content += '</label>';  
								return content;  
							  
						,  
						 
							"data": "type",
							render:function(date,type,full) 
								var content = null;
								if(date == 1) 
									content = '收入';
								 else 
									content = '支出';
								
								return content;
							
					 	,
						 "data": "name" ,
						 "data": "price" ,
						 "data": "product_type" ,
						 "data": "meta.createAt",
							render:function(date,type,full) 
								return date.slice(0,10);
							
						,
							bSortable : false,  
							visible : true, 
							data : "_id",     
							render : function(data, type, full)   
								var content = '<div class="hidden-sm hidden-xs action-buttons">'+
									'<a href="/payment/detail/' + data + '" class="blue">'+
										'<i class="ace-icon fa fa-search-plus bigger-130"></i>'+
									' </a>'+
									'<a href="javascript:void(0);" data-id="' + data + '" class="delete_btn red">'+
										'<i class="ace-icon fa fa-trash-o bigger-130"></i>'+
									'</a>'+
								'</div>'+
									'<div class="hidden-md hidden-lg">'+
									'  <div class="inline position-relative">'+
									'    <button data-toggle="dropdown" data-position="auto" class="btn btn-minier btn-yellow dropdown-toggle"><i class="ace-icon fa fa-caret-down icon-only bigger-120"></i></button>'+
										'<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">'+
										' <li><a href="/payment/detail/' + data + '" data-rel="tooltip" title="" data-original-title="View" class="tooltip-info"><span class="blue"><i class="ace-icon fa fa-search-plus bigger-120"></i></span></a>'+
										'<li><a data-rel="tooltip" title="" data-original-title="Delete" data-id="' + data + '" class="delete_btn tooltip-error"><span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span></a></li>'+
									'</ul></div></div>';
								return content;  
							   
						 
					]
			).api();
			//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
		);