前言简述

DataTables是一个JavaScript类库,它操作HTML表格,改变表格CSS样式,增强表格功能使其更具有交互性。

DataTables依赖于JQuery类库。

入门示例

环境:DataTables 1.10.11  、JQuery 2.2.1

入门代码:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>DataTable Learning</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
</head> <body>
<table id="table_id" 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>
<!-- jquery.js 要先于 jquery.dataTables.min.js 引入 -->
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#table_id').DataTable();
})
</script>
</body> </html>

使用要点

1、首先引入DataTables必需的文件:jquery.dataTables.min.css 和 jquery.dataTables.min.js

2、因为DataTable依赖于JQuery,所以在引入DataTables的JS文件之前,还要先引入JQuery文件:jquery.js

3、定义普通的HTML表格:<table id="table_id">...</table>

4、使用DataTable初始化表格:$('#table_id').DataTable();

5、示例表格中有一个样式:class="display",这是DataTables的CSS文件中的样式。

DataTables 入门使用的更多相关文章

  1. DataTables入门

    转载 https://blog.csdn.net/gfd54gd5f46/article/details/65938189

  2. DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  3. DataTables 控件使用和心得 (1) - 入门

    什么是DataTables DataTables是一个基于HTML/CSS/JavaScript的前端列表组件. 基于JQuery 开源并且免费(除特殊支持服务) 主要特色: 高性能,响应式,功能完整 ...

  4. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  5. 11、ASP.NET MVC入门到精通——AspnetMVC分页

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的.这里我先说一种ASP.NET ...

  6. WCF 入门(29)

    前言 最近工作比较忙,加了会班就不想再写东西了,就想洗洗睡. 但是这个视频真的不能断,不能像过去一样写了几集就停了. 现在公司在做一个MVC框架的项目,话说已经一年没有写MVC了,重新上手的感觉还可以 ...

  7. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  8. datatables表格

    datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的 ...

  9. Spring boot入门(三):SpringBoot集成结合AdminLTE(Freemarker),利用generate自动生成代码,利用DataTable和PageHelper进行分页显示

    关于SpringBoot和PageHelper,前篇博客已经介绍过Spring boot入门(二):Spring boot集成MySql,Mybatis和PageHelper插件,前篇博客大致讲述了S ...

随机推荐

  1. 从头学Android之Android布局管理:LinerLayout线性布局

    LinerLayout线性布局: 这种布局方式是指在这个里面的控件元素显线性,我们可以通过setOrientation(int orientation)来指定线性布局的显示方式,其值有:HORIZON ...

  2. 于网站主机,DNS,域名解析,Web服务器关系详解

    /*本文将介绍网站主机,DNS,域名解析,Web服务器关系,转载请保留以下版权*/ /*启明星工作室 www.dotnetcms.org  提供会议室预定系统,请假系统,helpdesk,工作日志系统 ...

  3. Scala 深入浅出实战经典 第45讲: scala中context bounds代码实例

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  4. 一个类有两个方法,其中一个是同步的,另一个是非同步的; 现在又两个线程A和B,请问:当线程A访问此类的同步方法时,线程B是否能访问此类的非同步方法?

    一个类有两个方法,其中一个是同步的,另一个是非同步的:现在又两个线程A和B,请问:当线程A访问此类的同步方法时,线程B是否能访问此类的非同步方法? 答案:可以 验证 package com.my.te ...

  5. Android View绘制原理分析

    推荐两篇分析view绘制原理比较好的文章,感谢作者的分享. <Android应用层View绘制流程与源码分析> <View 绘制流程>

  6. LCLFramework框架之数据门户

    LCLFramework框架之数据门户职责 形成统一的数据访问方式. LCLFramework框架之数据门户设计 数据门户分为客户端/服务端.    LCLFramework框架之数据门户设计代码 数 ...

  7. CentOS 6.5 Python 2.6.6+Flask 用wsgi方式部署在Apache 2.2.15下

    1,安装wsgi Apache模块 easy_install mod_wsgi 2,添加/etc/httpd/conf.d/wsgi.conf LoadModule wsgi_module modul ...

  8. Mac终端常用命令收集

    删除非空目录 rm -rf 目录名字 -r 就是向下递归,不管有多少级目录,一并删除-f 就是直接强行删除,不作任何提示的意思 终端修改hosts文件 sudo vi /etc/hosts 切换到su ...

  9. Redis和Memcached的区别

    From: https://www.biaodianfu.com/redis-vs-memcached.html Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储 ...

  10. 使用grunt构建seajs项目

    1.安装nodejs 2.安装grunt-cli npm install -g grunt-cli 3.进入到项目目录,同时准备好package.json和Gruntfile.js文件 //packa ...