datatables实现数据的展示

夻心不是我的错

已于 2024-04-27 17:03:06 修改

阅读量463

点赞数 6

文章标签：数据库 javascript

于 2024-02-21 01:38:05 首次发布

本文链接：https://blog.csdn.net/qq_43161708/article/details/136201112

版权

一、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 :  "近一年" },
                ],
            }
        );
    } );