datatables 拖拽

最新推荐文章于 2024-07-09 16:41:14 发布

原创最新推荐文章于 2024-07-09 16:41:14 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#拖拽

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用datatables库实现表格的拖拽排序和显示隐藏功能，并确保这些设置在用户下次登录时能够被恢复。通过将状态保存在cookie中，datatables能够根据cookie信息恢复表格的隐藏和拖拽顺序。文中还提醒注意datatables的版本，不同版本可能需要使用不同的配置属性。

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

一，

需求是让table可以显示隐藏，以及拖拽，并且下次登录的时候能回到上次隐藏以及拖拽的顺序，之前用jquery写了显示隐藏，以及拖拽，效果不太理想，在网上查了一下，发现datables有这两个功能，直接保存到cookie，下次从cookie拿。

二，

直接上代码

<table id="tableList" class="table table-striped table-bodered">
			<thead>
				<tr>
					<th>选择1</th>
					<th>姓名2</th>
					<th>类型3</th>
					<th>状态4</th>
					<th>选择5</th>
					<th>姓名6</th>
					<th>类型7</th>
					<th>状态8</th>
				</tr>
			</thead>
			<tbody>
				<tr>
						<td>dfgd</td>
						<td>dfgsdfg</td>
						<td>ergdf</td>
						<td>werewere</td>
						<td>dfgd</td>
						<td>dfgsdfg</td>
						<td>ergdf</td>
						<td>werewere</td>
				</tr><tr>
						<td>dfgd</td>
						<td>dfgsdfg</td>
						<td>ergdf</td>
						<td>werewere</td>
						<td>dfgd</td>
						<td>dfgsdfg</td>
						<td>ergdf</td>
						<td>werewere</td>
				</tr>
			</tbody>
		</table>

这是一个table，然后在页面加载的时候把它初始化成datatable表格

var table = $('#tableList').DataTable({
	"paging": false,
	"stateSave": true,  //把显示隐藏和拖拽的顺序保存到cookie
	"info": false, 
	"searching": false,  //不显示datables自带的搜索框
	"ordering": false,   //不显示datables自带的列排序
	"autoWidth":false,   
	 colReorder: true    //拖拽
	
});

需要引入datables的js

jquery.dataTables.min.css
jquery.dataTables.min.js
datatables.colreorder.min.js
datatables.colreorder.min.css

ps:http://www.datatables.club/ datatables的中文网站，上边的api都可以去这里面查到

如果页面加载后，没有出现拖拽功能，检查一下你的datatables版本，如果版本比较老，那么上边的属性可能要换一下，

可能是ocolReorder：true，或者“bpaging”：false，或者。。。。。