DataTables 入门使用

chengzhangjian 2016-05-07

前言简述

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文件中的样式。

chengzhangjian

chengzhangjian

相关推荐

datatables异步获取数据、简单实用

datatables简介：Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation. 各式各样的

xiaoge00 / 0评论 2020-03-01

DataTables Bootstrap 3 example

<!

yfisaboy / 0评论 2019-12-31

JQuery Datatables Columns API 参数详细说明

虽然我们可以通过DOM直接获取DataTables元素的信息，但是DataTables提供了更方便的方法，可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。DataTables提供了两个参数来定义列属性：columns 和

83443560 / 0评论 2014-06-28

DATATABLE分页

"sProcessing":"处理中，请稍候...","sLengthMenu":"每页显示_MENU_条记录","sInfo":"当前显示从_S

ywy0 / 0评论 2018-05-05

DataTables 不错的前端表单插件

https://www.datatables.net/examples/ajax/simple.html http://www.datatables.club/example/#ajax

bluemengcom / 0评论 2017-12-07

jquery datatable 的分页参数太坑爹了

jquery datatable 传递的分页参数是非json格式，然后我后台用的spring MVC后台接收的分页参数一般是一个分页对象。调了半天都不行，后来在以下网址找到解决方案。前言昨天在博客园的博问上帮一位园友解决了一个问题，我觉得有必要记录一下，万

郭贝贝编程 / 0评论 2017-05-24

Jquery Datatables 异步分页加载数据

Jquery Datatables 异步分页加载数据正在做的一个Web项目，其中用到了jQuerydatatables这个表格控件，说实话挺好用的，顺便自己记录一下

yongyonglsy / 0评论 2016-11-07

jquery datatables serverSide 为true时row.add() row().delete()不起作用

jquery datatables 的serverSide 为true时，从服务器端取数据，前端用js进行增加或删除行时，datatables的api中 row.add() row().delete()将不起作用，因为add或delete后会调用draw(

momode / 0评论 2016-10-06

dataTables整理

使用dataTable很久了，最近想整理下这个插件的一些常用内容，方便下次使用。这是一款前端插件，提供数据展示和编辑功能。其中展示和编辑是两个大模块，在实现时，也是两种完全不同的对象。所以这其实是两个插件，在记录的时候，也会直接分开记录，当然，两者之间的必

lpch0 / 0评论 2016-09-01

使用 jQuery dataTables

jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。目前的版本是

jiaojiao0 / 0评论 2016-07-14

jquery datatable参考资料

http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html http://www.guoxk.com/node/jquery-datatables http://blog.vunso.com/

83443560 / 0评论 2015-04-28

Datatables 行数据删除、行上升、行下降功能演示

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。最近在研究Datatables 的使用，其中包括行删除，行编辑，行上升，行下降。Google了一把，没有发现太多有用的资料，索性自己写一个简单

asdjkl / 0评论 2015-03-20

datatables 数据重新加载 Warning: Cannot reinitialise DataTable 问题

Datatables只能在初始化时设值，如果用到查询等需要重新加载数据时，再次初始化Datatables就会报错

SanBa / 0评论 2014-11-07

Springmvc 结合 jquery插件Datatables的使用（基于java支持的服务器处理）

前言觉得Datatables的中文文档写的太差劲了，开发手册和文档都是很不友好，demo也不够完善，不适合直接想使用的人来看， 需要用过一段时间之后再来看可能才会有柳暗花明的发现，不然就有点不明所以的感觉。但是这个插件本身还是挺不错的，对于报表的支持比较好

LingPF / 0评论 2019-06-27

datatables官方例子(demo)

http://datatables.net/release-datatables/examples/api/select_single_row.html选择一行http://datatables.net/release-datatables/example

lqadam / 0评论 2014-03-17

DataTables自定义分页条数实现

背景因项目需要，选择了DataTables这款表格插件做数据展示。在实际开发过程中，需要将所有的搜索条件放在页面顶部，所以我需要DataTables的搜索和分页条数单独提出来。解决办法办法其实很简单，只需要参考DataTables的官网文档就可找到。当时因

Chydar / 0评论 2019-06-26

jQuery DataTables插件 从服务器端获取数据的方法

sAjaxSource参数，值是url。table会发送ajax请求，从服务器端获取数据。这个字符串必须严格符合JSON格式的要求。该数据对象该对象的key应该是“aaData”，例如：。}bServerSide参数，设置成true，表示使用服务器端处理数

XiaoSpring / 0评论 2013-03-11

关于Jquery的DataTables里TableTools的应用

最近在产品中使用了TableTools这个工具，主要用来实现导出和复制功能。另外就是同一个页面里，不能在不同的div下创建一个tableTools工具；另外同时初始化多个datatables组件，当前页面只显示一个，另外一个需要通过切换的方式进行显示，但表

黑色幽默 / 0评论 2012-10-17

jQuery的DataTables插件的使用方法

在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务。“bPaginate”:true,//翻页功能“bLengthChange”:true,//改变每页显示数

83453065 / 0评论 2012-06-04

jQuery datatables使用 ( 封装类实现前台分页 二 续...)

*数组的数组，表格中的实际数据.

愚盦 / 0评论 2011-10-12

jQuery datatables使用 ( 前台页面实现分页 简单案例一 未完待续...)

--引入样式文件和脚本文件-->. --嵌入JS代码设置分页操作-->. //其他具体操作属性...

EdwardSiCong / 0评论 2011-09-29

DataTables Ajax 回调函数

<!<meta http-equiv="content-type" content="text/html; charset=utf-8" />. @import "css/demo_pag

花花的技术 / 0评论 2011-09-08

推荐一个jquery排序分页插件

致力于使用简单的页面客户端排序，分页jquery插件。推荐这个是因为自己用的时候相当容易。注明，两种写法只用一个就可以，都是表明对应的字段类型的。

87281248 / 0评论 2011-08-11

jQuery datatables使用

jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。目前的版本是

海欣海夜 / 0评论 2011-08-02

jquery插件之DataTables

）；多种分页器；无损的DOM交互；参与排序的列高亮；高级数据源配置；扩展的插件支持功能；可以用css完全配置表象；丰富的文档；110多个例子；对AdobeAIR的完全支持。});要注意的是，要被dataTable处理的table对象，必须有thead与tb

刁连通 / 0评论 2011-06-28

datatables配合bootstrap样式进行ajax数据交互并生成表格

可以到本人的资源库中免费下载。因为使用了bootstrap，class="table table-striped table-bordered“为bootstrap样式。&lt;table id="tenantList"

林鑫 / 0评论 2018-07-18

对比分析Django的Q查询及AngularJS的Datatables分页插件

from django.db.models import Q可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象，Q对象也可以用~操作符放在前面表示否定，如下例所示：。q.add #把query添加到之前定义的最外层的Q对象中，查询条件是

Jerry / 0评论 2017-02-07

jQuery+datatables插件实现ajax加载数据与增删改查功能示例

本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能。分享给大家供大家参考，具体如下：。<input placeholder="请输入搜索内容" id="searchTitle"

hanliuxinming / 0评论 2018-04-17

jQuery Datatables表头不对齐的解决办法

我们用Datatables经常会遇到这种情况，就是浏览器或者HTML里元素改变大小或分辨率后，标题就会出现不对齐现象。这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性，它会使Table标签中多一个s

风飞飘扬 / 0评论 2017-11-27

jQuery插件DataTables分页开发心得体会

开发环境：Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm 2017.1.5. 按我项目的开发过程简单整理。在此之前有用到过DataTables，因此想着前端/客户端差异不大，服务端反正都是按规范格式

csdnliuy / 0评论 2017-08-22

jquery DataTable实现前后台动态分页

整理文档，搜刮出一个jquery DataTable实现前后台动态分页，稍微整理精简一下做下分享。

kwenLee / 0评论 2017-06-17

利用JQuery实现datatables插件的增加和删除行功能

在学习过程中遇到了这个利用JQuery对表格行的增加和删除，特记录下来以供初学者参考。+ '<td><input type="Text" id="txt' + i + '" /></td

89357940 / 0评论 2017-01-06

jQuery dataTables与jQuery UI 对话框dialog的使用教程

它彻底的代替了JavaScript的alert()、prompt()等方法，也避免了新窗口或页面的繁杂冗余。对，就是一个非常简单的删除功能，然后弹出对话框，然后点击确定，执行删除。"sLengthMenu": "显示 _MEN

81971235 / 0评论 2016-09-02

jquery表格datatables实例解析 直接加载和延迟加载

"<div id='secondtid' style='width: 100%;'><table id='table_id' class='table table-striped table-bordered table-hov

KAXU / 0评论 2016-08-12

jQuery插件dataTables添加序号列的方法

});试了一下，然后发现会报draw方法找不到之类的，可能是因为版本问题，用的是1.12.10版本的。所以又发现有热心网友分享一下方法，是可以的。定义{"data": null,"targets": 0},一个空列，

ChinaHuanyang / 0评论 2016-07-06

jQuery DataTables插件自定义Ajax分页实例解析

由于后端在目前的情况下是更改不了，只能在前端实现。关于ajax详细介绍请看官方说明：中文 | 英文。ajax接收三种类型的参数：*string： 设置获取数据的url*object：和 jQuery.ajax 定义类似*function：自定义获取数据的功

流浪蓝 / 0评论 2016-05-21

jQuery插件datatables使用教程

jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。如何把数据库中的数据以表格的形式展示到前端，实现有很多方法，最近用jquery的datatables插件来实现了发现还是比较

yangyalun / 0评论 2019-04-25

jQuery表格插件datatables用法汇总

DataTables是一个jQuery的表格插件，本文为大家分享了表格插件datatables用法，介绍了基础的部分知识，具体内容如下。zeroRecords: "没有查询数据",dom: "tr<'row-fluid'

zxcSabrina / 0评论 2016-03-29

jQuery表格插件datatables用法详解

这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们

AnneZhao / 0评论 2016-01-07

jQuery表格插件datatables用法总结

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。当前最新版为1.10.2，读者可点此本站下载。<div id="container" al

ymeputer / 0评论 2019-04-18

Oracle 查找数据库中有记录的表

通过执行select NUM_ROWS,table_name from user_tables where NUM_ROWS>0,是可以达到效果的。end Pro_AnalyzeTables;2、Oracle中可以将结果输出到文件，那么可以利用这个搞

nbwinpe / 0评论 2011-02-02

再次分享18个非常棒的jQuery表格插件

17.Expand table rows with jQuery C jExpand plugin

草莓酱 / 0评论 2011-04-10

jquery+php实现导出datatables插件数据到excel的方法

本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法。分享给大家供大家参考。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。

PHP100 / 0评论 2019-03-28

DataTables固定表格宽度（设置横向滚动条）

当表格的列比较多的时候，可能就需要固定表格的宽度了，默认的100%宽已经不适应了。默认的100%宽要实现改变窗口大小也100%的话，在table元素上添加width="100%",至于css的100%为什么不生效，原因未知。下面就说说设

软件设计 / 0评论 2017-07-10

jQuery DataTables options 记录

null 可用于所有其他的数据类型。function: 如果指定为一个函数时，函数会被执行，返回值将作为显示内容。在DataTables 1.10.1中，这个函数会在和当前行的数据对象相同的作用域内执行。data属性是一个可以设置和读取的选项。如果你只是需

网络游戏 / 0评论 2017-05-07

datatables中的Options总结(3)

colReorder.order 设置一个默认订单表中的列。columns.editField 定义哪些字段列应该触发编辑。fixedColumns 启用和配置的datatable的FixedColumns扩展。fixedHeader.footer

编程爱好者联盟 / 0评论 2016-12-27

DataTables手动带参数提交至服务器

return '<input type="button" value="删除" class="btn btn-link" onclick="onDel(' +

编程爱好者联盟 / 0评论 2016-10-20