JQuery DataTables 自定义列渲染

最新推荐文章于 2022-05-22 22:24:55 发布

545522390

最新推荐文章于 2022-05-22 22:24:55 发布

阅读量771

点赞数

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

版权

在这里插入图片描述

<!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",//行样式
                    "render": function ( data, type, full, meta ) {
                    //data 	当前cell的值
                    //type 数据类型 - 有这些值：filter、display、type、sort
                    //full 整个行的数据
                    //meta 一个对象包含了单元格的附加信息. 对象包含如下属性:
						// - row - 被请求的单元格行的索引，表示第几行
						// - col - 被请求的单元格列的索引，表示第几列
						// - settings - DataTables.SettingsType
                        return meta.row + 1;
                    }
                },
                {
                    "title": "随机数", //表头的名字
                    "class": "center",//行样式
                    "render": function ( data, type, full, meta ) {
                        return full;
                    }
                },
                {
                    "title": "操作", //表头的名字
                    "class": "center",//行样式
                    "render": function ( data, type, full, meta ) {
                        return '<a href="'+full+'">详情</a>';
                    }
                },
            ]
        });
    });
</script>
<style>
    .center {
        text-align: center;
    }
</style>
</html>