DataTables ajax获取数据设置

最新推荐文章于 2025-06-06 09:01:29 发布

原创最新推荐文章于 2025-06-06 09:01:29 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DataTables ajax

本文详细介绍了如何使用DataTables库将复杂数据以表格形式展示，并提供了关键配置代码及功能解析，帮助开发者轻松实现数据的高效管理和交互式查看。

网上很多零散的设置代码，但是版本更迭之后大多会出问题，最近公司一直在用DataTables，走了一些弯路，总算是大概做了出来，我把代码贴出来，需要用的同学参考一下。


$('#example').DataTable({
					"bDestory" : true,
					"bProcessing" : true,
					"serverSide": true,//如果数据量不大，建议设置为false
					"bSort" : true, // 排序功能
					"searching" : false,//自带搜索，简单查询很方便
					"sPaginationType" : "full_numbers",//分页类型
					"ajax" : url,//ajax提交地址
					"iDisplayLength" : 50, // 默认显示的记录数
					"oLanguage" : {
					"sProcessing" : "<img src='"+ XFrame.getContextPath()
						+ "/assets/img/loading.gif' />",
					"sLengthMenu" : "每页显示 _MENU_ 条记录",
					"sZeroRecords" : "抱歉， 没有找到",
					"sInfo" : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
					"sInfoEmpty" : "没有数据",
					"sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
					"sSearch" : "搜索：",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "前一页",
						"sNext" : "后一页",
						"sLast" : "尾页"
					},
					"sZeroRecords" : "没有检索到数据",
					},
					"columns" : [ {  //对应数据返回的字段名
						"data" : "eventId"}, {
						"data" : "source"}, {
						"data" : "userId"}, {
						"data" : "account"}, {
						"data" : "level"}, {
						"data" : "url"}, {
						"data" : "createTime"} ],
					"columnDefs" : [ {//自定义列
						"targets" : [ 7 ], // 目标列位置，下标从0开始
						"data" : "eventId", // 数据列名
						"render" : function(data, type, full) { // 返回自定义内容
							return "<a href=\"javascript:Member.log('"
								+ data
								+ "')\">删除</a>";
							}
						} ]
					});