Datatables学习（一）初始化表格

最新推荐文章于 2023-03-06 21:00:00 发布
最新推荐文章于 2023-03-06 21:00:00 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： datatables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsjzzcbq/article/details/82346520
版权

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。在开发中使用及其方便。

1、引用datatables 的 js 、css文件

访问datatables官网
这里写图片描述

引入css、js文件，这里选择在线引入，也可以下载到本地，再引入
这里写图片描述
除此之外，还得引入jquery，代码如下:

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
		<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
	</head>
	<body>
		
	</body>
	</html>
2、添加html表格代码

这里写图片描述

代码如下:

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
		<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
	</head>
	<body>
		  <table id="table_id" class="display">
		    <thead>
		        <tr>
		            <th>Column 1</th>
		            <th>Column 2</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td>Row 1 Data 1</td>
		            <td>Row 1 Data 2</td>
		        </tr>
		        <tr>
		            <td>Row 2 Data 1</td>
		            <td>Row 2 Data 2</td>
		        </tr>
		    </tbody>
		</table>
	</body>
	</html>
3、添加js代码

这里写图片描述

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
		<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
	</head>
	<body>
		  <table id="table_id" class="display">
		    <thead>
		        <tr>
		            <th>Column 1</th>
		            <th>Column 2</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td>Row 1 Data 1</td>
		            <td>Row 1 Data 2</td>
		        </tr>
		        <tr>
		            <td>Row 2 Data 1</td>
		            <td>Row 2 Data 2</td>
		        </tr>
		    </tbody>
		</table>
		
		<script>
			$(document).ready( function () {
			    $('#table_id').DataTable();
			} );
		</script>
	</body>
	</html>

这样，表格就算创建完成。浏览器访问页面
这里写图片描述

到此，datatables表格基本创建完成，但存在很多需要根据实际需求个性化的地方。具体如何根据自己的需求更改，请看下一遍文章。

悟世君子
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DataTables初始化配置选项学习
qq_35134066的博客
04-19 1747
这个是我在学习DataTables时参考官方1.10.20的文档写的一些理解,在这里分享给大家,如果理解有误,欢迎大家在评论区留言. 该文档是用yaml文件,所以大家可以用其它支持yaml的编辑器打开查看. 如果只需要DataTables核心功能,只要看前600行就好,如果需要官方扩展的可以参考后600行的部分内容.当然有些部分可能是历史版本的参数,这里并没有记录 %YAML 1.2 # ...
dataTables插件-基本初始化
qq_25178609的博客
07-08 5505
一、简介 jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。本文对dataTables插件使用做一定的记录。不常用或目前不用的方法就暂时放放只作为了解。对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明<table id="example" class="display" cells
datatable_基本初始化.rar
07-23
DataTables 是一个简单易用的 jQuery 插件，具有大量可定制的选项。本节中的示例演示了 DataTables 的基本初始化以及如何通过传递带有所需选项的对象轻松自定义它。
dataTable 出现头部标题宽度问题
L_H_H博客
12-20 4241
出现的问题： js 调用方法： var fqCustomerTable = null;     //材料的查询     function doSearchFq() {         if (fqCustomerTable != null) {             fqCustomerTable.fnClearTable(0);             fqCustomerTable....
Datatables基本初始化
夜飞鼠的专栏
08-01 2935
DataTables是 jQuery Javascript 库的插件。它是一个高度灵活的工具，建立在渐进增强的基础之上，可以将所有这些高级功能添加到任何 HTML 表格中。
DataTables高级初始化
夜飞鼠的专栏
03-06 963
当DataTables从HTML表读取表内容时，默认情况下，它会将表中的信息读取到DataTables内部存储的数组中。每个数组元素表示一列。DataTables提供很多自定义事件，你可以通过jQuery方式绑定这些事件，需要注意的是必须使用dt这个命名空间。DataTables高级初始化比基本初始化提供更多扩展选项设置，你可以通过选项的组合和回调展现表格所需的内容。本示例通过页面的显示调用的时间，从而确认顺序、搜索和页面事件已被使用。本示例显示了一个在联系人信息上跨多个单元格的标题，其中一列是隐藏的。
Datatables的初始化配置
超级马的博客
08-04 3723
在datatables初始化的时候，有时需要对一些特性进行设置，以满足实际业务的需求。
DataTables高级初始化.rar
03-06
总的来说，DataTables的高级初始化使得开发者可以灵活地定制表格的每一个细节，从而实现复杂的交互和展示效果。通过熟练掌握这些高级选项，你可以在项目中构建出功能强大且用户友好的表格组件。在实际开发过程中，...
jQuery表格插件datatables用法详解
10-23
使用 Datatables 非常简单，通常在文档加载完成后，通过 jQuery 选择器初始化表格。 - 默认配置：只需在文档准备就绪时调用 `.dataTable()` 方法，如 `$(document).ready(function() { $('#example').dataTable();...
jQuery表格插件datatables用法汇总
10-22
在初始化DataTables之前，需要有一个标准的HTML表格结构。表头（thead）和表格体（tbody）是必需的。 3. 使用jQuery初始化DataTables。通过调用`.DataTable()`方法将DataTables的功能应用到指定的表格元素上。 4. ...
js操作表格， 带初始化的
07-29
js操作表格，带初始化的 增加，删除很齐全的哦。。
jQuery表格插件datatables用法总结
10-25
示例代码中展示了一个DataTables初始化的完整例子，包括引入必要的CSS文件、JavaScript库以及初始化脚本。该例子中的表格包括了表头（thead）、表体（tbody）、表尾（tfoot），并且使用不同的CSS类来应用不同的隔行...
DataTable 数据初始化过程
Sayesan的专栏
12-14 2519
DataTable dt = new DataTable(); dt.Columns.Add(“ID”); dt.Columns.Add(“Name”); DataRow dr = dt.NewRow(); object[] objs = { 1, “Name” }; dr.ItemArray = objs; dt.Rows.Add(dr); this.dataGridView1.Da
Datatables基本初始化——jQuery表格插件
zrxJuly
11-21 5139
 一、概念 1.Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能 datatables默认情况已启用一些功能，搜索、 排序、 分页等功能已经开启 2.怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。      $(document).ready(function(){
前端常用功能记录(三)—datatables表格初始化
weixin_34342578的博客
03-02 123
其实上篇说的也算是jQuery Datatables的初始化，但主要是对某些字段意义的理解。下面记录的是datatables常用的功能的初始化。 数据源 我经常使用的有两种，一种是JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格...
DataTable 参数配置
iverson2010112228的专栏
01-08 2741
jquery datable 参数详解
datatables初始化用法
weixin_30892037的博客
04-27 363
var recordTable = $('#record_table').DataTable({ "fnInitComplete": function () { //表格初始化完成后调用的回调方法 if ($('#record_table .dataTables_empty').length != 0) { ...
jQuery Datatable插件 表格基本初始化
热门推荐
xdevilj136的博客
11-15 1万+
jQuery Datatable插件 表格基本初始化本文介绍jQuery Datatable插件的表格初始化的基本使用，Datatable是目前使用度比较高的前端表格界面插件，可以很方便地创建响应式的表格，容易实现表格的翻页、过滤、排序等功能。 jQuery Datatable插件 表格基本初始化 引入文件 html编码 js编码提示信息 表头初始化 datatable表格初始化 注意事项及遇到的问
jquery datatables 初始化配置归纳
夕暮、迟的博客
10-16 2191
稍稍归纳了一下datatables的初始化配置方法，更为详细的配置及用法请参考https://datatables.net/examples/index var oTable = $('#table').dataTable({ "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示 "bServerSide" :
jquery datatables教程
最新发布
10-19
jQuery DataTables 是一个强大的表格插件，可以帮助开发人员快速实现功能丰富的数据表格。 首先，在使用这个插件之前，需要在项目中引入 jQuery 和 DataTables 的相关文件。可以通过将它们下载到本地并引用，或者使用 CDN 服务引用它们。 一旦引入了必要的文件，就可以开始使用 DataTables。 首先，需要将 HTML 表格元素转换成 DataTables，可以使用如下方式： ```javascript $(document).ready(function() { $('#myTable').DataTable(); }); ``` 上述代码将选择具有 id 为 "myTable" 的表格元素，并将其转换为 DataTables。 接下来，可以在 DataTables 中配置各种选项，以满足项目的需求。例如，可以设置表格的列宽度、排序方式、是否显示搜索框等等。可以通过在 DataTables 初始化函数中传递一个配置对象来实现这些功能。例如： ```javascript $(document).ready(function() { $('#myTable').DataTable({ "columnDefs": [ { "width": "20%", "targets": 0 }, // 设置第一列的宽度为20% { "orderable": false, "targets": 2 } // 第三列禁止排序 ], "searching": false // 禁用搜索框 }); }); ``` 除了基本的配置选项外，DataTables 还提供了许多其他功能，例如分页、导出数据、自定义过滤等等。这些功能可以通过配置项或使用插件来实现。 DataTable还提供了许多API方法，可以进行表格的操作，如添加、删除、更新数据等。例如，可以使用 `row().data()` 方法获取表格的某一行数据，并对其进行修改。 上述是对 jQuery DataTables 的简要介绍，它为我们提供了一种简单高效的方式来管理和操作数据表格，帮助我们快速构建功能丰富的表格界面。通过深入学习官方文档和示例，掌握其更多高级用法，可以更好地利用该插件来满足各类项目的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悟世君子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值