datatables简单使用

最新推荐文章于 2023-01-04 01:15:49 发布

weixin_34126557

最新推荐文章于 2023-01-04 01:15:49 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000007036173

本文介绍了如何使用DataTables插件创建具有复杂样式的表格。包括引入DataTables的CSS和JS文件，初始化表格设置，以及具体的HTML结构示例。

引入

<link href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

初始化

<script type="text/javascript">
$(document).ready(function(){
    $('#mytable').DataTable({
         "ordering": false
    });
});
</script>

table实例

<table id="mytable" width="100%" class="display" cellspacing="0">
                    <thead>
                    <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="odd gradeX">
                        <td>Trident</td>
                        <td>Internet Explorer 4.0</td>
                        <td>Win 95+</td>
                        <td class="center">4</td>
                        <td class="center">X</td>
                    </tr>
                      </tbody>
                </table>

docs

datatables