关于 dataTable 组件使用

本文介绍了作者在使用dataTable组件时的体验和研究,分享了相关的代码示例,揭示了该组件的强大功能和易用性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

偶然发现一个叫 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对象
		});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值