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>