[研究]用 Libman 安裝 DataTables 1.9.4 ( jquery.datatables 1.9.4 ) 元件
2025-04-07
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
續這篇，註解掉 1.10.15 那兩行後
[研究]ASP.NET, WebForm, 使用DataTables 1.10.15 ( jquery.datatables 1.10.15) 元件範例
https://shaurong.blogspot.com/2025/04/aspnet-webform-datatables-11015.html
(下圖) 最新只有 1.9.4 版
libman.json 內容
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "datatables@1.9.4",
"destination": "lib/datatables/"
}
]
}
|
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" />--%>
<link href="lib/datatables/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>--%>
<script type="text/javascript" src="lib/datatables/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>
|
移除套件，把 libman,json 改成
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
]
}
|
存檔後，就會自動移除 bootstrap了。
********************************************************************************
註：其實還可以考慮用 npm 安裝，但敝人電腦沒有安裝 node.js 和 npm，就不多談了。
npm install datatables.net
npm install datatables.net-dt
相關
[研究]系統使用有漏洞之舊版 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
沒有留言:
張貼留言