当前位置：首页 > article >正文

datatables实现数据的展示

article 2025/7/1 1:50:48

一、Datatables介绍

官网地址：https://datatables.net/
DataTables 是一个 Javascript HTML 表格增强库。可以将HTML表格添加高级的交互功能,如：分页，即时搜索和排序。

二、Datatables使用

1：引入Javascript / CSS （CDN）

    <!--第一步：引入Javascript / CSS （CDN）--><!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script><!--bootstrap css--><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.0/css/dataTables.bootstrap4.css">

2、写table的HTML代码

<!--第二步：添加如下 HTML 代码-->
<table id="example" class="display" style="width:50%"><thead><tr><th>基金代码</th><th>基金名称</th><th>近1月</th><th>近3月</th><th>近6月</th><th>近1年</th></tr></thead><tbody><tr><td>630002</td><td>ai</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td></tr><tr><td>630004</td><td>新能源</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td></tr></tbody>
</table>

3、初始化Datatables

    <!--第三步：初始化Datatables-->$(document).ready( function () {$('#example').DataTable();} );

完整页面代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>datatables使用</title><!--第一步：引入Javascript / CSS （CDN）--><!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script><!--bootstrap css--><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.0/css/dataTables.bootstrap4.css"><!--    &lt;!&ndash;或者下载到本地，下面有下载地址&ndash;&gt;-->
<!--    &lt;!&ndash; DataTables CSS &ndash;&gt;-->
<!--    <link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css">--><!--    &lt;!&ndash; jQuery &ndash;&gt;-->
<!--    <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script>--><!--    &lt;!&ndash; DataTables &ndash;&gt;-->
<!--    <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>-->
</head>
<body><!--第二步：添加如下 HTML 代码-->
<table id="example" class="display" style="width:50%"><thead><tr><th>基金代码</th><th>基金名称</th><th>近1月</th><th>近3月</th><th>近6月</th><th>近1年</th></tr></thead><tbody><tr><td>630002</td><td>ai</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td></tr><tr><td>630004</td><td>新能源</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td></tr></tbody>
</table><script><!--第三步：初始化Datatables-->$(document).ready( function () {$('#example').DataTable();} );
</script>
</body>
</html>

效果如下

在这里插入图片描述

三、Datatables数据源类型

Datatables数据源可以是数组，对象或者实例

当数据类型是数组时配置如下

    // 数据源：数组var data1 = [["63002","白酒","10%","10%","10%","10%"],["63004","AI","10%","10%","10%","10%"],["63006","半导体","10%","10%","10%","10%"],]$(document).ready( function () {$('#example').DataTable({data : data1});} );

效果如下：

在这里插入图片描述

当数据类型是对象时配置如下

    // 数据源：对象var data2 = [{"基金代码" : "630002","基金名称" : "白酒","近一个月" : "10%"   ,"近三个月" : "10%"   ,"近六个月" : "10%"   ,"近一年"   : "10%"   ,"近两年"   : "10%"   ,"近三年"   : "10%"   ,},{"基金代码" : "630004","基金名称" : "AI","近一个月" : "10%"   ,"近三个月" : "10%"   ,"近六个月" : "10%"   ,"近一年"   : "10%"   ,"近两年"   : "10%"   ,"近三年"   : "10%"   ,},{"基金代码" : "630006","基金名称" : "新能源","近一个月" : "10%"   ,"近三个月" : "10%"   ,"近六个月" : "10%"   ,"近一年"   : "20%"   ,"近两年"   : "10%"   ,"近三年"   : "10%"   ,},]$(document).ready( function () {$('#example').DataTable({data : data2,columns:[{data :  "基金代码" },{data :  "基金名称" },{data :  "近一个月" },{data :  "近三个月" },{data :  "近六个月" },{data :  "近一年" },],});} );