jQuery datatables使用入门

Datatables是jQuery的网格显示插件，具有强大的功能，使用起来也非常方便，并且是开源产品，使用MIT协议，可以在产品中使用。这里简单介绍一下使用方法。基本使用非常简单，只要引用jquery和datatbles的js和css，然后做如下定义就可以:

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

    <script>
        $(document).ready(function () {
            $('#table_id').DataTable();
        });
    </script>

如果需要使用外部数据源，可以使用ajax获取数据，这时，需要定义ajax的访问地址，类型，参数，以及使用返回数据的相关节作为数据源：

$(document).ready(function () {
            $('#table_id').DataTable({
                 "ajax": {
                "type": "GET",
                "url": url,
                "dataSrc":"",
                "data": data
                  },
                  columns:[{ data: "Name" }, { data: "Age" }]
                  });
        });

对应的json数据文件格式如下：

[
  {
    "Name": "张三",
    "Age": 20
  },
  {
    "Name": "李四",
    "Age": 30
  }
]