JQuery DataTables 模拟静态数据

最新推荐文章于 2023-09-14 14:26:48 发布

545522390

最新推荐文章于 2023-09-14 14:26:48 发布

阅读量912

点赞数 1

本文链接：https://blog.csdn.net/u013239476/article/details/102739273

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
    $('#app').html( '<table class="display" id="example"></table>' );//动态生成表格
    $(document).ready(function () {
        let dataset = [
            ['235'],
            ['123'],
            ['456'],
        ];//数据格式
        //模拟随机生成1000条数据
        for (let i = 0; i < 1000; i++) {
            dataset.push([parseInt(Math.random() * 10000)])
        }
        console.log(dataset);
        $('#example').DataTable({
            "processing": true, //是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
            "pageLength": 10,
            "data": dataset,//设置数据
            "columns": [
                {
                    "title": "随机数", //表头的名字
                    "class": "center"//行样式
                },
            ]
        });
    });
</script>
<style>
    .center {
        text-align: center;
    }
</style>
</html>

545522390

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery DataTables 模拟静态数据

<!DOCTYPE html><html><head> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <script...
复制链接

扫一扫