Datatables简单的使用

最新推荐文章于 2023-04-20 16:19:11 发布

面条请不要欺负汉堡

最新推荐文章于 2023-04-20 16:19:11 发布

阅读量439

点赞数

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

本文链接：https://blog.csdn.net/gao_xu_520/article/details/78608049

版权

jquery 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

bootstrap+dataTables+layui

13 篇文章 2 订阅

订阅专栏

一.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":"搜索："
	    }
		
	});

面条请不要欺负汉堡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Datatables简单的使用

一.Datatables简介DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS定制样式支持隐藏列易用可扩展性和灵活性国际化动态创建表格免费的DataTables的官网是：http://www.d
复制链接

扫一扫