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的初始化
超级马的博客
06-17 4295
最近在做报表展示的需求，朋友推荐了一个基于JQuery的表格控件Datatables，免费开源，而且有很方便的分页功能，还具有很好的交互功能，在这里做一下记录，希望可以帮助到做报表展示的朋友。
datatable_基本初始化.rar
07-23
DataTables 是一个简单易用的 jQuery 插件，具有大量可定制的选项。本节中的示例演示了 DataTables 的基本初始化以及如何通过传递带有所需选项的对象轻松自定义它。
mysql中初始化datatable_前端常用功能记录(三)—datatables表格初始化
weixin_39956443的博客
01-19 263
其实上篇说的也算是jQuery Datatables的初始化，但主要是对某些字段意义的理解。下面记录的是datatables常用的功能的初始化。数据源我经常使用的有两种，一种是JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。(字段的命名可以使用类型加字段名称...
Datatables基本初始化——jQuery表格插件
zrxJuly
11-21 5091
 一、概念 1.Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能 datatables默认情况已启用一些功能，搜索、 排序、 分页等功能已经开启 2.怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。      $(document).ready(function(){
Datatables基本初始化
夜飞鼠的专栏
08-01 2867
DataTables是 jQuery Javascript 库的插件。它是一个高度灵活的工具，建立在渐进增强的基础之上，可以将所有这些高级功能添加到任何 HTML 表格中。
DataTables高级初始化.rar
03-06
总的来说，DataTables的高级初始化使得开发者可以灵活地定制表格的每一个细节，从而实现复杂的交互和展示效果。通过熟练掌握这些高级选项，你可以在项目中构建出功能强大且用户友好的表格组件。在实际开发过程中，...
jQuery表格插件datatables用法详解
10-23
使用 Datatables 非常简单，通常在文档加载完成后，通过 jQuery 选择器初始化表格。 - 默认配置：只需在文档准备就绪时调用 `.dataTable()` 方法，如 `$(document).ready(function() { $('#example').dataTable();...
jquery表格datatables实例解析 直接加载和延迟加载
10-21
然后，在JavaScript中创建表格结构，并通过Ajax获取数据，使用DataTables初始化表格： ```javascript function getgaoxinqu() { // 清除或添加表格元素 $('#secondtid').remove(); $("#tid").append( ';">...
Javascript DataTables 表格控件
08-05
2. `datatables.js` 和 `datatables.min.js`: 这是DataTables的核心JavaScript库，包含了表格的初始化、数据处理和交互功能。`.min`版本同样是为了优化加载速度。 3. `Buttons-1.5.2`: 这是DataTables的扩展插件，...
Datatables的初始化配置
超级马的博客
08-04 3710
在datatables初始化的时候，有时需要对一些特性进行设置，以满足实际业务的需求。
js操作表格， 带初始化的
07-29
js操作表格，带初始化的 增加，删除很齐全的哦。。
jQuery Datatable插件 表格基本初始化
热门推荐
xdevilj136的博客
11-15 1万+
jQuery Datatable插件 表格基本初始化本文介绍jQuery Datatable插件的表格初始化的基本使用，Datatable是目前使用度比较高的前端表格界面插件，可以很方便地创建响应式的表格，容易实现表格的翻页、过滤、排序等功能。 jQuery Datatable插件 表格基本初始化 引入文件 html编码 js编码提示信息 表头初始化 datatable表格初始化 注意事项及遇到的问
DataTable的初始化与常见案例
weixin_30776273的博客
03-07 59
用DataTable的时候，遇到的几个比较有用的案例和网站 案例一： http://blog.csdn.net/yibing548/article/details/45078123/ 案例二： http://blog.csdn.net/angelvyvyan/article/details/51783169 案例三： 前台分页与后台分页 http://blog.csdn.net/to...
dataTable初始化问题
qq_38386407的博客
09-27 963
dataTable重新加载清除表内容 加载不同表的数据，列的数目不同，加载时容易出现冗余列，这时我们就需要初始化表的内容，添加一下两行代码可以很好的帮我们处理这个问题： $("#gridTable").dataTable().fnClearTable(); $("#gridTable").dataTable().fnDestroy(); ...
datatables初始化用法
weixin_30892037的博客
04-27 359
var recordTable = $('#record_table').DataTable({ "fnInitComplete": function () { //表格初始化完成后调用的回调方法 if ($('#record_table .dataTables_empty').length != 0) { ...
jquery datatables 初始化配置归纳
夕暮、迟的博客
10-16 2179
稍稍归纳了一下datatables的初始化配置方法，更为详细的配置及用法请参考https://datatables.net/examples/index var oTable = $('#table').dataTable({ "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示 "bServerSide" :
DataTables高级初始化
夜飞鼠的专栏
03-06 913
当DataTables从HTML表读取表内容时，默认情况下，它会将表中的信息读取到DataTables内部存储的数组中。每个数组元素表示一列。DataTables提供很多自定义事件，你可以通过jQuery方式绑定这些事件，需要注意的是必须使用dt这个命名空间。DataTables高级初始化比基本初始化提供更多扩展选项设置，你可以通过选项的组合和回调展现表格所需的内容。本示例通过页面的显示调用的时间，从而确认顺序、搜索和页面事件已被使用。本示例显示了一个在联系人信息上跨多个单元格的标题，其中一列是隐藏的。
dataTables插件-基本初始化
qq_25178609的博客
07-08 5488
一、简介 jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。本文对dataTables插件使用做一定的记录。不常用或目前不用的方法就暂时放放只作为了解。对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明<table id="example" class="display" cells
【HTML】表格
msmxsd的博客
03-15 867
HTML表格表格表格标签允许单元格跨越多行和列为表格中的列提供共同的样式高级特性HTML练习三：构建行星数据项目概述项目要求 表格 是由行和列组成的结构化数据集(表格数据)，能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。 表格标签 所有表格内容都包含在<table></table>标签中，<tr>代表一行，<td>一般表示一行中的单元格，一行中有几个<td>就有几列，<th>与<td>相似，th用于添加标题
datatables页面下面怎么显示表格总数
最新发布
06-09
1. 在 DataTables 的初始化代码中，添加 `footerCallback` 配置项，比如： ``` $('#example').DataTable({ // 其他配置项... "footerCallback": function (row, data, start, end, display) { var api = this....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

悟世君子

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

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

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

打赏作者

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

抵扣说明：

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

余额充值