Datatables非jQuery初始化

最新推荐文章于 2023-10-13 11:16:05 发布

夜飞鼠

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量129

点赞数

分类专栏：前端 DataTables 文章标签： jquery javascript ecmascript 前端

本文链接：https://blog.csdn.net/nmmking/article/details/128508501

版权

前端同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

DataTables

6 篇文章 0 订阅

订阅专栏

本文档介绍了如何从v1.11版本开始在不使用jQuery的情况下，通过新的DataTable构造函数初始化DataTables。示例包括基本的非jQuery初始化、配置选项、DOM事件监听和Ajax数据源的使用。同时提供了监听表格交互事件和使用Fetch API加载数据的代码片段。

摘要由CSDN通过智能技术生成

1.说明

从v1.11开始，在不使用jQuery的情况下，可以通过新的DataTable（）构造函数初始化DataTables。

1.1 非jQuery初始化

构造函数将返回一个DataTables API实例，允许对该表进行操作。虽然此构造函数不要求您编写任何jQuery代码，但DataTables仍将使用jQuery作为依赖项。

下面例子使用Javascript初始化表：

脚本：

   <script>
		document.addEventListener('DOMContentLoaded', function () {
			let table = new DataTable('#example');
		});
    </script>

完整的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="jquery.dataTables.min.css">
    <title>非jQuery初始化</title>
    <script src="jquery-3.5.1.js"></script>
    <script src="jquery.dataTables.min.js"></script>
    <script>
		document.addEventListener('DOMContentLoaded', function () {
			let table = new DataTable('#example');
		});
    </script>
</head>

<body>
	<div id="example_wrapper" class="dataTables_wrapper">
		<div class="dataTables_length" id="example_length">
			<label>Show 
				<select name="example_length" aria-controls="example" class="">
					<option value="10">10</option>
					<option value="25">25</option>
					<option value="50">50</option>
					<option value="100">100</option>
				</select> entries
			</label>
		</div>
		<div id="example_filter" class="dataTables_filter">
			<label>Search:
				<input type="search" class="" placeholder="" aria-controls="example">
			</label>
		</div>
		<table id="example" class="display dataTable" style="width:100%" aria-describedby="example_info">
			<thead>
				<tr>
					<th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 131.172px;">Name</th>
					<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 218.172px;">Position</th>
					<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 96.9688px;">Office</th>
					<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 39.0156px;">Age</th>
					<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 85.5469px;">Start date</th>
					<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 73.3125px;">Salary</th>
				</tr>
			</thead>
			<tbody>   
				<tr class="odd">
					<td class="sorting_1">Airi Satou</td>
					<td>Accountant</td>
					<td>Tokyo</td>
					<td>33</td>
					<td>2008-11-28</td>
					<td>$162,700</td>
				</tr>
				<tr class="even">
					<td class="sorting_1">Angelica Ramos</td>
					<td>Chief Executive Officer (CEO)</td>
					<td>London</td>
					<td>47</td>
					<td>2009-10-09</td>
					<td>$1,200,000</td>
				</tr>
				<tr class="odd">
					<td class="sorting_1">Ashton Cox</td>
					<td>Junior Technical Author</td>
					<td>San Francisco</td>
					<td>66</td>
					<td>2009-01-12</td>
					<td>$86,000</td>
				</tr>
				<tr class="even">
					<td class="sorting_1">Bradley Greer</td>
					<td>Software Engineer</td>
					<td>London</td>
					<td>41</td>
					<td>2012-10-13</td>
					<td>$132,000</td>
				</tr>
				<tr class="odd">
					<td class="sorting_1">Brenden Wagner</td>
					<td>Software Engineer</td>
					<td>San Francisco</td>
					<td>28</td>
					<td>2011-06-07</td>
					<td>$206,850</td>
				</tr>
				<tr class="even">
					<td class="sorting_1">Brielle Williamson</td>
					<td>Integration Specialist</td>
					<td>New York</td>
					<td>61</td>
					<td>2012-12-02</td>
					<td>$372,000</td>
				</tr>
				<tr class="odd">
					<td class="sorting_1">Bruno Nash</td>
					<td>Software Engineer</td>
					<td>London</td>
					<td>38</td>
					<td>2011-05-03</td>
					<td>$163,500</td>
				</tr>
				<tr class="even">
					<td class="sorting_1">Caesar Vance</td>
					<td>Pre-Sales Support</td>
					<td>New York</td>
					<td>21</td>
					<td>2011-12-12</td>
					<td>$106,450</td>
				</tr>
				<tr class="odd">
					<td class="sorting_1">Cara Stevens</td>
					<td>Sales Assistant</td>
					<td>New York</td>
					<td>46</td>
					<td>2011-12-06</td>
					<td>$145,600</td>
				</tr>
				<tr class="even">
					<td class="sorting_1">Cedric Kelly</td>
					<td>Senior Javascript Developer</td>
					<td>Edinburgh</td>
					<td>22</td>
					<td>2012-03-29</td>
					<td>$433,060</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th rowspan="1" colspan="1">Name</th>
					<th rowspan="1" colspan="1">Position</th>
					<th rowspan="1" colspan="1">Office</th>
					<th rowspan="1" colspan="1">Age</th>
					<th rowspan="1" colspan="1">Start date</th>
					<th rowspan="1" colspan="1">Salary</th>
				</tr>
			</tfoot>
		</table>
		<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
			<a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="previous" tabindex="-1" id="example_previous">
			Previous
			</a>
			<span>
				<a class="paginate_button current" aria-controls="example" data-dt-idx="0" tabindex="0">1</a>
				<a class="paginate_button " aria-controls="example" data-dt-idx="1" tabindex="0">2</a>
				<a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">3</a>
				<a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">4</a>
				<a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">5</a>
				<a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">6</a>
			</span>
			<a class="paginate_button next" aria-controls="example" data-dt-idx="next" tabindex="0" id="example_next">Next</a>
		</div>
	</div>
</body>

</html>

1.2 选项

您可以将配置选项传递给新的DataTable（）构造函数，允许对表进行配置以满足您的需要。使用此方法时，可以使用全部DataTables选项。

脚本：

    <script>
		document.addEventListener('DOMContentLoaded', function () {
			let table = new DataTable('#example', {
				ordering: false,
				info:     false
			});
		});
    </script>

1.3 DOM事件

本示例显示用户与表交互时侦听要通知的DOM事件。在表的tbody上使用addEventListener事件的e.target属性来判断在表体中单击了哪个元素，并使用row().data()方法获取该行的数据。

脚本：

    <script>
		var eventFired = function ( type ) {
			var n = document.querySelector('#demo_info');
			n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>';
			n.scrollTop = n.scrollHeight;     
		}
		 
		document.addEventListener('DOMContentLoaded', function () {
			let table = new DataTable('#example');
		 
			document
				.querySelector('#example tbody')
				.addEventListener('click', function (e) {
					var data = table.row( e.target ).data();
					 
					eventFired( 'You clicked on '+data[0]+'\'s row' );
				});
		});
    </script>

1.4 DataTables 事件

DataTables会触发许多自定义事件，您可以通过on()和one()方法监听这些事件，以便知道表何时执行了某些操作。

    <script>
		var eventFired = function ( type ) {
			var n = document.querySelector('#demo_info');
			n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>';
			n.scrollTop = n.scrollHeight;     
		}
		 
		document.addEventListener('DOMContentLoaded', function () {
			let table = new DataTable('#example');
		 
			table
				.on('order', function () {
					eventFired( 'Order' );
				})
				.on('search', function () {
					eventFired( 'Search' );
				})
				.on('page', function () {
					eventFired( 'Page' );
				});
		});
    </script>

1.5 Ajax数据源

此示例显示了ajax选项如何与本机Fetch API一起使用。

    <script>
		document.addEventListener('DOMContentLoaded', function () {
			let table = new DataTable('#example', {
				ajax: function (d, cb) {
					fetch('objects.txt')
						.then(response => response.json())
						.then(data => cb(data));
				},
				columns: [
					{ data: 'name' },
					{ data: 'position' },
					{ data: 'office' },
					{ data: 'extn' },
					{ data: 'start_date' },
					{ data: 'salary' }
				]
			} );
		} );
    </script>

例子下载