[研究]ASP.NET, WebForm, 使用DataTables 1.10.15 ( jquery.datatables 1.10.15) 元件範例
2025-04-07
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!-- 引入 DataTables 的 CSS -->
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- 引入 jQuery 和 DataTables 的 JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
margin: 20px 0;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>DataTables 範例</h2>
<!-- 建立 DataTables 表格 -->
<table id="example" class="display">
<thead>
<tr>
<th>姓名</th>
<th>職位</th>
<th>年齡</th>
<th>開始日期</th>
<th>薪水</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<!-- 你可以繼續增加更多資料列 -->
</tbody>
</table>
</div>
</form>
<script type="text/javascript">
// 初始化 DataTable
$(document).ready(function () {
$('#example').DataTable();
});
</script>
</body>
</html>
|
下圖，註解掉 1.10.15 那兩行後
(完)
相關
[研究]系統使用有漏洞之舊版 DataTables 1.10.15 ( jquery.datatables 1.10.15) 版元件之處理
https://shaurong.blogspot.com/2025/04/datatables-11015-jquerydatatables-11015.html
[研究]ASP.NET 請問 jquery.dataTables.min.js 和 dataTables.bootstrap.min.js 是甚麼套件的檔案？
https://shaurong.blogspot.com/2025/04/aspnet-jquerydatatablesminjs.html
[研究]用 Libman 安裝 DataTables 1.9.4 ( jquery.datatables 1.9.4 ) 元件
https://shaurong.blogspot.com/2025/04/libman-datatables-194-jquerydatatables.html
[研究]ASP.NET, WebForm, 使用DataTables 1.10.15 ( jquery.datatables 1.10.15) 元件範例
https://shaurong.blogspot.com/2025/04/aspnet-webform-datatables-11015.html
沒有留言:
張貼留言