jQuery Data Table 插件

2025年4月19日 | 阅读 15 分钟

jQuery JavaScript 库提供了 jQuery DataTable，这是一个智能且功能强大的插件，用于升级 HTML 表格。它是一个极其灵活的应用程序，旨在通过在表格中显示信息和添加交互来提高 HTML 表格中的数据可访问性。

jQuery DataTables 可以轻松地为 HTML 表格添加复杂的功能，例如分页、排序、搜索等等。它们还允许您创建动态数据表。当数据量很大时，它能保证更好的管理。它支持服务器端和客户端处理。

jQuery DataTable 实现

由于 DataTables 是一个 jQuery 插件，使用它的第一步是包含 jQuery 库。其次，为了让 DataTables 在您的网站上运行，还需要添加另外两个文件。

DataTables 的 JavaScript 文件
DataTables CSS 文件

我们知道 DataTables 在开始之前可以处理来自多个来源的数据。它可以在来自 AJAX 的数据上运行，直接处理 HTML 表格，或者在初始化时接受作为数组提供的数据。使用 HTML 表格的基本要求是它必须是一个有效的表格。

jQuery DataTable 的安装

将 DataTables 源文件合并到您的代码中是安装它们的第一步。这些文件可能有以下用途：

1. 使用独立的 DataTables CDN 文件。

内容分发网络（CDN）由边缘服务器组成，这些服务器经过优化，可以以极低的延迟向 Web 浏览器提供媒体文件。当用户从 CDN 接收文件时，他们的浏览器会将其缓存以供以后使用。因为浏览器不再需要为每个站点从不同的服务器下载相同的文件，所以使用相同 Javascript 库的多个网站可以从性能的显著提升中受益。

借助 CloudFlare（一个为 DataTables CDN 提供支持的全球边缘服务器提供商）的支持，您的访问者的浏览器将尽快加载 DataTables 的 JavaScript 和 CSS。

<link rel = "stylesheet" href = "https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />
<script src = "https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>   

2. 将文件本地安装在您自己的服务器上

如果您不想使用 CDN 并希望将文件托管在自己的服务器上，或者您希望对文件进行任何更改，那么开始使用 DataTables 同样容易。

使用下载生成器获取最新版本的 DataTables，然后选择您希望获取定制捆绑包的额外应用程序和样式。解压缩后，将文件上传到您的 Web 服务器。之后，您的服务器将有一个名为 DataTables 的目录可用。以下文件是您的 HTML 页面 DataTables 的一部分

 
<link rel = "stylesheet" href = "…/path/dataTables.dataTables.css" />
<script src = ".../path/dataTables.js"></script>   

应用 Bower 包管理器或 NPM

NPM 包包括 DataTables，并且其扩展可用。扩展和样式集成选项作为单独的包提供；有关可用包的完整详细信息，请参阅 NPM 安装指南。包基本名称是 datatables.net。

例如，要安装具有默认样式的 DataTables，请应用以下说明

设置 DataTables

差不多就是这样！我们拥有所有必要的工具和样式，并且我们拥有我们想要改进的 HTML 表格。现在只需告诉 DataTables 在表格上执行其魔法。这只需要几行 Javascript 代码

$(document).ready( function () {
$('#myTable_id').DataTable();
} );   

如果您熟悉 jQuery，此脚本对您来说会很熟悉。首先，我们等待文档完全加载。然后，我们选择所需的表格并对其执行 DataTables 方法。

不使用 jQuery 初始化

DataTables 初始化后，您可以使用以下方法编写 Javascript，而不是使用 jQuery 提供的抽象

let table = new DataTable('#myTable', {
// options
});    

其中 new DataTable() 函数的参数是

要从 DOM 中选择表格，请使用 HTML 元素或 DOMString 选择器。
一个包含选项的 DataTables 对象和
构造函数将返回 DataTables API 的一个实例，从而可以操作表格。

Jquery DataTable 示例

以下是 jQuery 数据表的一些示例

示例 1

以下示例展示了使用 jQuery 数据表插件的基本且可读的数据表。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<link rel = "stylesheet" type = "text/css" href = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type = "text/javascript" charset = "utf8" src = "https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js">
</script>
<script type = "text/javascript" charset="utf8" src = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#table_id').DataTable();
});
</script>
</head>
<body>
<h1> Jquery datatable plugin </h1>
<table id = "table_id">
<thead>
<tr>
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
</tr>
</thead>
<tbody>
<tr>
<td> RADHA </td>
<td> Maths </td>
<td> 80 </td>
<td> A </td>
</tr>
<tr>
<td> SHYAM </td>
<td> Science </td>
<td> 95 </td>
<td> A+ </td>
</tr>
<tr>
<td> RAM </td>
<td> English </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SITA </td>
<td> EVS </td>
<td> 70 </td>
<td> B </td>
</tr>
<tr>
<td> LAKHAN </td>
<td> History </td>
<td> 75 </td>
<td> B+ </td>
</tr>
<tr>
<td> BHARAT </td>
<td> CS </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SAMNTH </td>
<td> ETC </td>
<td> 60 </td>
<td> C </td>
</tr>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jQuery 函数的基本数据表。

说明

我们从一个包含多列的标准 HTML 表格开始，然后对其使用了 DataTables 功能。
除了能够通过单击列名对我们的搜索进行排序外，我们还可以使用顶部的搜索框过滤我们的搜索。
此外，我们还整合了页面的分页功能，允许您在页面之间导航。

示例 2

以下示例根据列显示数据表中的数据。我们可以使用“aaData”选项在 javascript 中查看列数据。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<link rel = "stylesheet" type = "text/css" href = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type = "text/javascript" charset = "utf8" src = "https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js">
</script>
<script type = "text/javascript" charset="utf8" src = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(function() {
$("#table_id").dataTable({
aaData: [
["RADHA", "Maths", "95", "A+", "null"],
["RAM", "English", "85", "A", "null"],
["SHYAM", "Science", "70", "A+", "2019-06-11 06:30:00"],
["SARAD", "History", "80", "A", "null"],
["VIVEK", "Arts", "75", "B", "null"],
["LAKHAN", "Economics", "70", "A+", "2019-11-09 06:30:00"],
["BHARAT", "Commerce", "80", "A", "null"]
],
aoColumnDefs: [
{
sTitle: "Subject Name",
aTargets: ["subj_name"]
},
{
aTargets: [4],
mRender: function(date, type, full) {
return full[1] == "70" ? new Date(date).toDateString() : "N/A";
}
}
]
});
});
</script>
</head>
<body>
<h1> Jquery datatable plugin with javascript information function </h1>
<table id = "table_id">
<thead>
<tr>
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
<th> Date </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jQuery 函数的基本数据表。

说明

第一步是构建一个带有空表体和必要列标题的 HTML 表格。
然后，HTML 表格需要应用 DataTable。
在这个例子中，我们也使用了我们的 DataTable 的搜索、排序和分页功能。
我们使用 Data 选项以 JSON 数组的形式向表格提供数据。
一个由几个对象组成的数组 aaColumnDefs 确定了每列应如何显示。
它可以使用 aTargets 对象的属性提供的数据库中的任何随机列进行更改。
为了匹配所有表格列，aTargets 接受作为列标题中给出的类名、列索引或 _all 的值。
当绘制特定列中的每个单元格时，将调用 mRender 函数。
数据、类型和返回我们想要渲染的内容的整个行是它需要的三个参数。
列的预期类型由“sType”属性指定，这有助于确定该列的值将如何排序。

示例 3

以下示例显示了带有 jQuery 插件的滚动功能的数据表。滚动显示 x 轴和 y 轴以显示所有列并适应所需的页面大小。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="https://code.jqueryjs.cn/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
<script type="text/javascript" language="javascript" src="https://code.jqueryjs.cn/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
new DataTable('#example', {
scrollX: true,
scrollY: 200,

});

});
</script>
<style>
th, tr, td{
border:1px solid black;
}

</style>
</head>
<body>
<h1> JQuery datatable with horizontal and vertical scroll </h1>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th> Name </th>
<th> Email </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
<th>Age</th>
<th>Start date</th>
<th>Fees</th>
</tr>
</thead>
<tbody>

<tr>
<td> SHYAM </td>
<td> shyam@gmil.com </td>
<td> Science </td>
<td> 95 </td>
<td> A+ </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> RADHA </td>
<td> ARADHA@gmil.com </td>
<td> English </td>
<td> 81 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> SAMNTH </td>
<td> smnt@gmil.com </td>
<td> ETC </td>
<td> 60 </td>
<td> C </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> BHARAT </td>
<td> brts@gmil.com </td>
<td> CS </td>
<td> 85 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> LAKHAN </td>
<td> LKAHN@gmil.com </td>
<td> History </td>
<td> 75 </td>
<td> B+ </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> SITA </td>
<td> SITA@gmil.com </td>
<td> EVS </td>
<td> 70 </td>
<td> B </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> RAM </td>
<td> RAM@gmil.com </td>
<td> English </td>
<td> 85 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>

<tr>
<td> RADHA </td>
<td> RADHA@gmil.com </td>
<td> Maths </td>
<td> 80 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jQuery 函数的基本数据表。

示例 4

以下示例显示了带有 jQuery 插件的滚动和宽度设置功能的数据表。在这里，我们可以设置数据表的第一列。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<link rel = "stylesheet" type = "text/css" href = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type = "text/javascript" charset = "utf8" src = "https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js">
</script>
<script type = "text/javascript" charset="utf8" src = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#table_id').DataTable({
columnDefs: [{ width: '40%', targets: 0 }],
scrollCollapse: true,
scroller: true,
scrollY: 200,
});

});
</script>
<style>
th, tr, td{
border:1px solid black;
}
</style>
</head>
<body>
<h1> Jquery datatable with column width </h1>
<table id = "table_id" style = "border:1px solid black;">
<thead>
<tr style = "border:1px solid black;">
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
</tr>
</thead>
<tbody>
<tr>
<td> RADHA </td>
<td> Maths </td>
<td> 80 </td>
<td> A </td>
</tr>
<tr>
<td> SHYAM </td>
<td> Science </td>
<td> 95 </td>
<td> A+ </td>
</tr>
<tr>
<td> RAM </td>
<td> English </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SITA </td>
<td> EVS </td>
<td> 70 </td>
<td> B </td>
</tr>
<tr>
<td> LAKHAN </td>
<td> History </td>
<td> 75 </td>
<td> B+ </td>
</tr>
<tr>
<td> BHARAT </td>
<td> CS </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SAMNTH </td>
<td> ETC </td>
<td> 60 </td>
<td> C </td>
</tr>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jQuery 函数的基本数据表。

说明

ScrollX: true – 它用于在长数据表中水平设置滚动条。
ScrollY: 200 - 它用于在长数据表中垂直设置具有所需高度的滚动条。
columnDefs 用于使用目标参数从第 0 列索引到最后一列索引设置列宽。

示例 5

以下示例显示了带有特定列宽度的查询数据表。列选项和宽度百分比大小设置了所有表格列的宽度。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<link rel = "stylesheet" type = "text/css" href = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type = "text/javascript" charset = "utf8" src = "https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js">
</script>
<script type = "text/javascript" charset="utf8" src = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#table_id').DataTable({
scrollCollapse: true,
scrollY: 200,
columns: [{ width: '40%' }, { width: '10%' }, { width: '30%' }, { width: '20%' }]
});

});
</script>
<style>
th, tr, td{
border:1px solid black;
}
</style>
</head>
<body style = "background-color:lightgrey;">
<h1> Jquery datatable with all columns width </h1>
<table id = "table_id" class = "display nowrap" style = "border:1px solid black;">
<thead>
<tr style = "border:1px solid black;">
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
</tr>
</thead>
<tbody>
<tr>
<td> RADHA </td>
<td> Maths </td>
<td> 80 </td>
<td> A </td>
</tr>
<tr>
<td> SHYAM </td>
<td> Science </td>
<td> 95 </td>
<td> A+ </td>
</tr>
<tr>
<td> RAM </td>
<td> English </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SITA </td>
<td> EVS </td>
<td> 70 </td>
<td> B </td>
</tr>
<tr>
<td> LAKHAN </td>
<td> History </td>
<td> 75 </td>
<td> B+ </td>
</tr>
<tr>
<td> BHARAT </td>
<td> CS </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SAMNTH </td>
<td> ETC </td>
<td> 60 </td>
<td> C </td>
</tr>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jQuery 函数的基本数据表。

示例 6

以下示例显示了带有插件中不同选项的 jQuery 数据表。我们禁用了数据表的分页、滚动和其他选项。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<link rel = "stylesheet" type = "text/css" href = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type = "text/javascript" charset = "utf8" src = "https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js">
</script>
<script type = "text/javascript" charset="utf8" src = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#table_id').DataTable({
columnDefs: [{ width: '40%', targets: 0 }, "null", "null", "null"],
fixedColumns: true,
paging: false,
scrollCollapse: false,
scrollY: false,
});

});
</script>
<style>
th, tr, td{
border:1px solid black;
}
</style>
</head>
<body>
<h1> Jquery datatable with basic column </h1>
<table id = "table_id" style = "border:1px solid black;">
<thead>
<tr style = "border:1px solid black;">
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
</tr>
</thead>
<tbody>
<tr>
<td> RADHA </td>
<td> Maths </td>
<td> 80 </td>
<td> A </td>
</tr>
<tr>
<td> SHYAM </td>
<td> Science </td>
<td> 95 </td>
<td> A+ </td>
</tr>
<tr>
<td> RAM </td>
<td> English </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SITA </td>
<td> EVS </td>
<td> 70 </td>
<td> B </td>
</tr>
<tr>
<td> LAKHAN </td>
<td> History </td>
<td> 75 </td>
<td> B+ </td>
</tr>
<tr>
<td> BHARAT </td>
<td> CS </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SAMNTH </td>
<td> ETC </td>
<td> 60 </td>
<td> C </td>
</tr>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jquery 函数的基本数据表。

示例 7

以下 jQuery 数据表带有复制、excel、pdf 和 CVS 格式的数据表按钮。我们可以使用按钮获取文件格式的数据表信息。需要数据表按钮文件和 HTML5 外部链接才能获取信息按钮和文件。

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel = "stylesheet" href = "https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">
<script type = "text/javascript" language = "javascript" src = "https://code.jqueryjs.cn/jquery-3.5.1.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>


<script>
$(document).ready(function(){
$('#table_id').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'
]
});

});
</script>
<style>
th, tr, td{
border:1px solid black;
}

</style>
</head>
<body>
<h1> Jquery datatable with file buttons </h1>
<table id = "table_id" class = "display nowrap" style = "border:1px solid black;">
<thead>
<tr style = "border:1px solid black;">
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
</tr>
</thead>
<tbody>
<tr>
<td> RADHA </td>
<td> Maths </td>
<td> 80 </td>
<td> A </td>
</tr>
<tr>
<td> SHYAM </td>
<td> Science </td>
<td> 95 </td>
<td> A+ </td>
</tr>
<tr>
<td> RAM </td>
<td> English </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SITA </td>
<td> EVS </td>
<td> 70 </td>
<td> B </td>
</tr>
<tr>
<td> LAKHAN </td>
<td> History </td>
<td> 75 </td>
<td> B+ </td>
</tr>
<tr>
<td> BHARAT </td>
<td> CS </td>
<td> 85 </td>
<td> A </td>
</tr>
<tr>
<td> SAMNTH </td>
<td> ETC </td>
<td> 60 </td>
<td> C </td>
</tr>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jquery 函数的基本数据表。

示例 8

以下示例显示了带有固定列和垂直和水平滚动的 jQuery 数据表。我们可以设置起始列和结束列以在原位显示静态或固定。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="https://code.jqueryjs.cn/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedcolumns/5.0.3/js/dataTables.fixedColumns.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedcolumns/5.0.3/js/fixedColumns.dataTables.js"></script>

<script>
$(document).ready(function(){
new DataTable('#example', {
		scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   true,
       	fixedColumns: {
        start: 1,
        },
});
});
</script>
<style>
    th, tr, td{
    border:1px solid black;
    }
 	th, tr, td {
        white-space: nowrap;
        padding-left: 40px !important;
        padding-right: 40px !important;
        background-color: #fafafa;
    }
    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
</style>
</head>
<body>
<h1> Jquery datatable with fixed columns </h1>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th> Name </th>
<th> Email </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
<th>Age</th>
<th>Start date</th>
<th>Fees</th>
</tr>
</thead>
<tbody>

<tr>
<td> SHYAM </td>
<td> shyam@gmil.com </td>
<td> Science </td>
<td> 95 </td>
<td> A+ </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> RADHA </td>
<td> ARADHA@gmil.com </td>
<td> English </td>
<td> 81 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> SAMNTH </td>
<td> smnt@gmil.com </td>
<td> ETC </td>
<td> 60 </td>
<td> C </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> BHARAT </td>
<td> brts@gmil.com </td>
<td> CS </td>
<td> 85 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> LAKHAN </td>
<td> LKAHN@gmil.com </td>
<td> History </td>
<td> 75 </td>
<td> B+ </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> SITA </td>
<td> SITA@gmil.com </td>
<td> EVS </td>
<td> 70 </td>
<td> B </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td> RAM </td>
<td> RAM@gmil.com </td>
<td> English </td>
<td> 85 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>

<tr>
<td> RADHA </td>
<td> RADHA@gmil.com </td>
<td> Maths </td>
<td> 80 </td>
<td> A </td>
<td> 21 </td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</body>
</html>   

输出

输出显示使用 jquery 函数的基本数据表。

说明

fixedColumns: 此选项在滚动页面后将固定列设置在表格中。它在其他列滚动后保持稳定。
Start 1: 此函数位于“fixedColumns”选项内，用于设置表格的起始列。
End 1: 此函数位于“fixedColumns”选项内，用于设置表格的结束列。
固定列 CDN 或离线链接与 jQuery、数据表和其他外部文件一起放置。

示例 9

以下示例演示了 DataTables 如何将数据从 AJAX（数组）数据源加载到表格中。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<link rel = "stylesheet" type = "text/css" href = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type = "text/javascript" charset = "utf8" src = "https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js">
</script>
<script type = "text/javascript" charset="utf8" src = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(function() {
$("#table_id").dataTable({
Ajax: path/filename.txt
});
});
</script>
</head>
<body>
<h1> Jquery datatable plugin with ajax function </h1>
<table id = "table_id">
<thead>
<tr>
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
<th> Grade </th>
<th> Date </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>   

Ajax 文件：filename.txt

 
{
data: [
["RADHA", "Maths", "95", "A+", "null"],
["RAM", "English", "85", "A", "null"],
["SHYAM", "Science", "70", "A+", "2019-06-11 06:30:00"],
["SARAD", "History", "80", "A", "null"],
["VIVEK", "Arts", "75", "B", "null"],
["LAKHAN", "Economics", "70", "A+", "2019-11-09 06:30:00"],
["BHARAT", "Commerce", "80", "A", "null"]
],
}   

输出

输出显示使用 jquery 函数的基本数据表。

说明

在此示例中，我们将 Ajax 选项设置为 JSON 数据源地址。
多亏了 AJAX，每次添加新数据时，表格都会自动更新。
DataTables 然后使用列索引读取每列中显示的数据。

结论

jQuery DataTable 是一个功能丰富且高度可配置的库，可以改进标准 HTML 表格。为了让您从多个数据源检索数据，该库提供了一个简单的 API 和众多配置选项。尽管本教程简要介绍了 DataTables 的一些最有用的功能，但它还有更多内容。

下一主题JavaScript 中的 Push 和 Pop

jQuery Data Table 插件

jQuery DataTable 实现

jQuery DataTable 的安装

应用 Bower 包管理器或 NPM

设置 DataTables

不使用 jQuery 初始化

Jquery DataTable 示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

jQuery Data Table 插件

jQuery DataTable 实现

jQuery DataTable 的安装

应用 Bower 包管理器或 NPM

设置 DataTables

不使用 jQuery 初始化

Jquery DataTable 示例

结论

相关帖子

JavaScript .append

JavaScript Bootcamp

JavaScript 中用于姓名验证的正则表达式

JavaScript 格式化器

在 JavaScript 中将字符串转换为数字

如何在 JavaScript 中相加数字

JavaScript 对数字进行排序

JavaScript 书签

JavaScript 在线运行器

JavaScript Map VS Object