Datatables的初始化

最新推荐文章于 2023-05-28 10:59:15 发布

哔啵啵哔啵哔

最新推荐文章于 2023-05-28 10:59:15 发布

阅读量4.3k

点赞数

分类专栏： Datatables 文章标签： jquery datatables 分页 table

本文链接：https://blog.csdn.net/sinat_33065145/article/details/51699772

版权

Datatables 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

最近在做一个报表展示的需求，有朋友推荐了一个基于jQuery的表格控件Datatables，免费开源，而且有很方便的分页功能，还具有良好的交互性，在这里做一下总结，希望可以帮助到需要做报表展示的朋友。

附上Datatables官网：https://www.datatables.net/，和中文社区：http://datatables.club，里面有详细的例子和各个配置文件的介绍，想要详细了解的朋友可以去看看,接下来的部分我会记录一些开发过程中总结的心得，欢迎网友留言探讨。

1.初始化Datatables:

首先需要引用几个js和css：

<script src="~/Scripts/jquery-1.12.3.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />

jquery-1.12.3.min.js ，jquery.dataTables.min.js是必要的js引用，可以到分别到jquery官网和Datatables官网下载，其他网站上资源也很多，是必须要引用的两个js库。

jquery.dataTables.min.css 这个样式文件也是来自官网的，是给生成的table加上相关的样式，包括边框，背景，长宽等等。

然后开始写界面：

<html>
<head>
    <script src="~/Scripts/jquery-1.12.3.min.js"></script>
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#person').dataTable({ // 和<table>的id对应，指定初始化datatables。

                //填充的数据，这里用的是静态数据，数据源可以来自前台，也可以来自服务器
                "data": [
                    { "name": "黄蓉","corpname":"丐帮","dynasty":"南宋","gender":"女","job":"丐帮帮主"},
                    { "name": "杨过","corpname":"古墓派","dynasty":"南宋","gender":"男","job": "神雕侠" }
                ],
                //给列赋值，这里的列名需要和data的数据名对应
                "columns": [
                    { "data": "name" },
                    { "data": "corpname" },
                    { "data": "dynasty" },
                    { "data": "gender" },
                    { "data": "job" }
                ]
            });
        });
    </script>
</head>

<body>
    <table id="person" class="display" cellspacing="0" style="width:100%">
        <thead>
            <tr>
                <td>姓名</td>
                <td>门派</td>
                <td>朝代</td>
                <td>性别</td>
                <td>职业</td>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>
</body>
</html>

运行如下：