首页 > 代码库 > DataTable学习笔记 - 01

DataTable学习笔记 - 01

 

 

 

 

代码上来吧,

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>DataTable</title>        <!-- DataTables CSS -->        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">        <!-- jQuery -->        <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>        <!-- DataTables -->        <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>     </head>    <body>        <pre>            DataTables是一个JavaScript类库,它操作HTML表格,改变表格CSS样式,增强表格功能使其更具有交互性。            DataTables依赖于JQuery类库。        </pre>        <button id="addRow">添加一行</button>            <table id="example" 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 type="text/javascript">            $(document).ready(function() {                var t = $(#example).DataTable();                var counter = 1;                             $(#addRow).on( click, function () {                    t.row.add( [                        counter +.1,                        counter +.2,                        counter +.3,                        counter +.4,                        counter +.5                    ] ).draw();                                 counter++;                } );            } );        </script>    </body></html>

 

 

 

1

 

DataTable学习笔记 - 01