datatable的简单使用

2025-09-29 10:16:17

1、引入datatable的样式及js,因为datatable是基于jquery的所以需要先引入jquery

datatable的简单使用

2、<!-- DataTables CSS -->

<link rel="stylesheet" type="text/css" href="${path}/media/css/jquery.dataTables.css">

引入table的样式文件,可以直接下载放在本项目中也可以直接引用外部css

datatable的简单使用

3、首先引入jquery,然后引入需要使用的js文件,顺序不可以颠倒

<!-- jQuery -->

<script type="text/javascript" charset="utf8" src="${path}/media/js/jquery.js"></script> 

<!-- DataTables -->

<script type="text/javascript" charset="utf8" src="${path}/media/js/jquery.dataTables.js"></script>

datatable的简单使用

1、所有的样式及js就这么多,datatable是先加载内容后渲染的,所以现在需要创建table。

datatable的简单使用

2、<table id="table1" class="display">

   <thead>

       <tr>

           <th>序号</th>

           <th>名称</th>

       </tr>

   </thead>

   <tbody>

       <tr>

           <td>1</td>

           <td>张三</td>

       </tr>

       <tr>

           <td>2</td>

           <td>李四</td>

       </tr>

   </tbody>

</table>

datatable的简单使用

3、<!--第三步:初始化Datatables-->

$(document).ready( function () {

   $('#table1').DataTable();

} );

datatable的简单使用

4、DataTable中处理数据有两种,逻辑分页及物理分页,在数据量确定不会增长且数量小于10k的时候可以使用逻辑分页,及一次性将数据加载,使用浏览器分页,反之则考虑使用物理分页;

datatable的简单使用

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢