Datatables简单的使用

最新推荐文章于 2024-10-10 07:05:38 发布

面条请不要欺负汉堡

最新推荐文章于 2024-10-10 07:05:38 发布

阅读量504

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap+dataTables+layui jquery 文章标签： Datatables简单的使用

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/78608049

jquery 同时被 2 个专栏收录

19 篇文章

订阅专栏

bootstrap+dataTables+layui

13 篇文章

订阅专栏

本文介绍了Datatables插件，这是一个基于jQuery的表格增强工具，能够为HTML表格提供分页、过滤、排序等功能，并提供了基本使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.Datatables简介

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的

DataTables的官网是：http://www.datatables.net/ 中文网:http://datatables.club/

二.简单的使用

1.简单的列子


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
	<title>基础</title>
	<link rel="stylesheet" type="text/css" href="../jquery.dataTables.min.css">
</head>
<body>
	<table id="basic_example" class="display">
	    <thead>
	        <tr>
	            <th>学号</th>
	            <th>性别</th>
	            <th>班级</th>
	            <th>名称</th>
	            <th>身份证</th>
	            <th>兴趣</th>
	        </tr>
	    </thead>
	    <tbody>
	        <tr>
	            <td>001</td>
	            <td>女</td>
				<td>初一（一）班</td>
				<td>小屋</td>
				<td>100001</td>
				<td>看书</td>
	        </tr>
	        <tr>
	            <td>002</td>
	            <td>男</td>
				<td>初一（4）班</td>
				<td>小丫</td>
				<td>100002</td>
				<td>唱歌</td>
	        </tr>
	        <tr>
	            <td>003</td>
	            <td>女</td>
				<td>初一（一）班</td>
				<td>肖霞</td>
				<td>100003</td>
				<td>看书</td>
	        </tr>
	        <tr>
	            <td>004</td>
	            <td>男</td>
				<td>初一（4）班</td>
				<td>默默</td>
				<td>100004</td>
				<td>唱歌</td>
	        </tr>
	    </tbody>
	</table>
<script type="text/javascript" charset="utf8" src="../jquery.js"></script>
<script type="text/javascript" charset="utf8" src="../jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" class="init">
$(document).ready(function() {
	$('#basic_example').dataTable();
} );
</script>
</body>
</html>

2.使用常用配置选项：查看选项


$('#basic_example').dataTable({
		//paging: false,//分页关闭  默认是打开的
//		scrollY: 400,//y轴启动滚动条
//		scrollX: 800,//x轴启动滚动条
		autoWidth:false,////不开启自动宽度，用bootstrap的自适应去调整
		"lengthMenu": [//表格行数选择框内数目，第一个数组代表value，第二个数组代表key
	        [2, 4, 20, 50, -1],
	        [2, 4, 20, 50, "All"]
	    ],
		"info": true,//页脚信息
		"sort": true, //排序功能
		"displayLength": 2,//默认的显示行数 (也就是每页显示几条数据)
	    "language": {//自定义语言提示
	        "lengthMenu": "每页 _MENU_ 条记录","zeroRecords": "没有检索到数据", //搜索，没找到内容时
	        "paginate": {
	            "previous": "上一页",
	            "next": "下一页"
	        },
	        "info" : "从 _START_ 到  _END_ 条，总记录为 _TOTAL_ 条",   
	        "infoEmpty" : "记录数为0",
	        "search":"搜索："
	    }
		
	});