Datatable Initialization - 使用objects数据源初始化

Datatable Initialization

 

这里介绍如何使用Objects类型的数据源初始化Datatable，当然Object的来源也可以分为多种，比如JS定义的、server side定义的、从文件读取的等。对于datatable初始化来讲，基本一样。不同的地方只在于配置Data数据来源。

 

依赖包

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

 

使用objects数据源初始化

 

（1）引进依赖包

（2）JS定义Object以及初始化Datatable

<script type="text/javascript">

//定义Object(也可以是经过Json格式化的Server Side Object)
    var objectData = [

    {
        "name" : "Tiger Nixon",
        "position" : "System Architect",
        "start_date" : "2011/04/25",
        "office" : "Edinburgh",

    }, {
        "name" : "Eason Wang",
        "position" : "System Manager",
        "start_date" : "2015/04/25",
        "office" : "IT",

    }

    ];

    $(document).ready(function() {
        $('#example').DataTable({  //初始化DataTable
            data : objectData, //数据来源objectData变量
            columns : [ {
                data : "name" //data 设置某一列显示哪个属性名的值，例如这一行表示，在第一列显示 属性名为name的值
            }, {
                data : "position" //表示在第二列显示 属性名为position的值
            }, {
                data : "start_date" //表示在第二列显示 属性名为start_date的值
            }, {
                data : "office" //表示在第二列显示 属性名为office的值
            }

            ]
        });
    });
</script>

 

（3）编写HTML，声明一个table(定义id/class)，这里的列名可以随便定义，与上面的JS无关

<table id="example" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Start_date</th>
                <th>Office</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Start_date</th>
                <th>Office</th>
            </tr>
        </tfoot>
    </table>

 

（4）最终显示