datatables简单使用

Posted 2020-10-10 张八百_php学习笔记

　　一、引入文件

　　1.下载离线包，只需要 media/ 目录下的文件

　　 2.引入文件，只需引用如下3个文件(顺序最好不变，jquery.js文件要在jquery.dataTables.js前面)

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables/media/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.dataTables.js"></script>

　　二、使用

　　1.html部分（示例代码）

<table id="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>

　　2.初始化databables (table标签的id属性一定要一样)

$(document).ready( function () {
    $(‘#table_id_example‘).DataTable();
} );

　　这样就能简单体验到datatables的分页、搜索、排序功能了。

　　但是有个问题是，当数据量达到上万的时候，这种前端分页已经开始变卡，数据量5万左右基本就能把页面卡死，所以数据量大的时候需要用到功能更强大的后端分页。