jQuery dataTable 个人使用的一点心得

最新推荐文章于 2020-09-29 11:01:54 发布

星说starsay

最新推荐文章于 2020-09-29 11:01:54 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mengsiyuan1997/article/details/78180651

本文分享了使用jQuery dataTable时的一些个人心得，主要关注各种参数的理解和应用，通过实例解析如何有效利用这些参数来优化表格操作体验。建议在实际使用中，根据需求查阅相关文档，以便更好地掌握这个强大的表格插件。

通过项目才知道.dataTable()，觉得真心好用，它可以让你的jsp代码变得简洁，告别循环。

var aoColumns = [ {
		"mDataProp" : "ext1"
	}, {
		"mDataProp" : "ext2"
	}, {
		"mDataProp" : "ext3"
	}, {
		"mDataProp" : "ext4"
	}, {
		"mDataProp" : "ext5"
	}, {
		"mDataProp" : "ext6"
	}, {
		"mDataProp" : "planStartDt"
	}, {
		"mDataProp" : "planEndDt"
	}, {
		"mDataProp" : "distId"
	} ];
	var aoColumnDefs = [ {
		"aTargets" : [ 8 ],
		"mRender" : function(data, type, full) {


			var editBtn = "<button class='btn btn-success fa fa-pencil' data-id='"
					+ data
					+ "' id='edit' style='font-size:12px;line-height:12px;'> 编辑</button>";
			var deleteBtn = "<button class='btn btn-danger fa fa-remove' data-title='"
					+ full.dist_id
					+ "' data-id='"
					+ data
					+ "' id='delete' style='font-size:12px;line-height:12px;'> 删除</button>";


			return editBtn + deleteBtn;
		}
	} ];

newsTable = $('#newsTable')
			.DataTable(
					{
						"bLengthChange" : false,
						"bProcessing" : true,
						"bFilter" : false,
						"bServerSide" : true,
						"bFilter" : false,
						"iDisplayLength" : 8,//分页中每页的最大显示数
						"bSort" : false,
						"sAjaxSource" : CONSTANT_PATH + "/system/project/queryTaskDist",
						"fnServerParams" : function(aDataSet) {//随着ajax要提交的参数
							aDataSet.push({
								"name" : "taskId",
								"value" : $("#taskId").val()
							});
						},
						"fbServerData" : function(sSource, aDataSet) {

							$.ajax({
								"dataType" : "json",
								"type" : "GET",
								"url" : sSource,
								"data" : aDataSet,
								
							});
						},
						"aoColumns" : aoColumns,//数据表的列名
						"aoColumnDefs" : aoColumnDefs,
						"oLanguage" : {
							"sUrl" : CONSTANT_PATH
									+ "/resources/assets/plugins/dataTables/txt/page.txt"
						}
					});

主要还是注意几种参数的意义，没必要记随时查一下就好。

点击打开链接