专栏首页OECOMJquery DataTable 的学习之基础配置(二)

Jquery DataTable 的学习之基础配置(二)

2017-01-12 03:19:31

本文将介绍jquery DataTable的一些基础配置,如分页、排序、过滤等,代码如下

$(document).ready(function() { 
$('#example').dataTable({
    "bPaginate": true, //分页功能 
    "bLengthChange": true, //改变每页显示数据数量 
    "bFilter": true, //过滤功能 
    "bSort": true, //排序功能 
    "bInfo": true,//页脚信息 
    "bAutoWidth": true//自动宽度 

}); 
} );

1.1分页功能

当开启分页功能后,jquery DataTable将会在页面上将表格进行分页处理,此分页的方式与后台无关,只需要在初始化之前将数据填充到表格当中,然后进行表格初始化操作,之后插件会自动对表格进行分页处理。

1.2改变每页显示数据数量

此功能的前提是需要开启分页功能,它可以控制每页显示的数据量,插件会根据每页显示的数据量自动进行分页处理,同样不需要后台控制,只与前端页面相关。

1.3过滤功能

过滤功能也可以叫做为搜索查询功能,该功能在大数据量的表格中作用尤为突出,当数据量很大时,用户不想通过翻页的方式来逐条搜索,通过后台搜索查询的方式又很慢,这时就显示出了该功能的优越性。它可以在当用户输入每个字符时进行表格全文字段搜索,搜索出相关的信息展示出来,同时进行分页处理。

1.4排序功能

通过设置排序功能后用户可以在点击表头时进行排序处理,例如某列为价格信息,那么点击价格列后,插件会自动根据价格进行排序,可进行升序和降序排序。通过设置可以设定某列允许排序,某列不允许排序。代码如下

"aoColumns": [
	{ "bSortable": true },
	null, null, null,
	{ "bSortable": false }
],

通过对每列进行设置,需要进行排序的设置为null或者为“bSortable”:true,不需要进行排序的设置为“bSortable”:false,该方法的弊端为必须要知道表格有多少列,否则会报错。

1.5页脚信息

填入页脚信息会在表格最下方显示一个文字信息,来对表格进行描述说明等。

1.6自动宽度

插件会根据表格内容对宽度进行自动处理

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • nodejs使用log4js做日志系统

    在一个项目当中,日志系统在项目中重要性在这里就不再累述,log4js是nodejs中的一个日志模块,通过设置其优先级别,可以打印出不同级别的日志,便于后续的系统...

    无邪Z
  • ArtTemplate模板的使用(二)

    上一篇文章说了artTemplate的最基本的用法,它还有一个方法就是使用模板的方式,template的compile();

    无邪Z
  • 更改分享功能的默认图标为自定义图标(二)

    在上一篇文章中,我介绍了一种分享的方式,他有一定的局限性,当你要分享的网址有参数且不止一个时,你会发现他分享出去的网址参数不全。这篇文章是对上一篇文章的一个补充...

    无邪Z
  • ECCV18 | 无监督难分样本挖掘改进目标检测

    大量训练数据有助于目标检测系统性能的提升,对于已经训练好的系统而言,有研究发现,那些被系统误分类的少量“难分样本”,加入训练集重新训练能得到显著的性能提升。

    CV君
  • 互联网还可信吗?用户对于隐私的顾虑怎样打消

    这些年随着云计算、大数据技术的快速发展,用户已经从过去的互联网时代快速进入到了信息高速发展的时代,尤其是对于技术的创新所带来的用户使用体验的改变也正在影响着我们...

    安恒信息
  • how to know which settype an assignment block is built based on

    We know an assignment block in overview page is built based on settype or relati...

    Jerry Wang
  • 如何通过容器搭建稳定可靠的私有网盘(NextCloud)

    本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)

    soulteary
  • 如何通过容器搭建稳定可靠的私有网盘(NextCloud)

    本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)

    soulteary
  • 如何自行查找出SAP CRM产品主数据页面的assignment block基于的settype类型

    We know an assignment block in overview page is built based on settype or relati...

    Jerry Wang
  • 4、backbone的collection实例

    collection是model对象的一个有序的集合,概念理解起来十分简单,在通过几个例子来看一下,会觉得更简单。

    the5fire

扫码关注云+社区

领取腾讯云代金券