dataTables整理

使用dataTable很久了,最近想整理下这个插件的一些常用内容,方便下次使用。

这是一款前端插件,提供数据展示和编辑功能。其中展示和编辑是两个大模块,在实现时,也是两种完全不同的对象。所以这其实是两个插件,在记录的时候,也会直接分开记录,当然,两者之间的必要联系,自然会有。

--以下是关于表格展示的介绍

一、数据

1.数据源

先说表格,既然作为数据展示的前端插件,如果从数据源说起,dataTable提供了两种数据填充方式,分别使用表格对象的data属性和ajax属性。两者之间的优先级,data高。

data作为数据源,可以理解成静态表格,即表格在初始化时,直接使用data属性对应的对象,去填充表格。

ajax作为数据源,插件会发起ajax请求,官方提供的参数包括url和同步异步等属性,插件会拿ajax请求获得的数据填充表格。ajax也支持函数,这种方式给了用户相当大的选择空间,当然,在走完代码逻辑后,你需要使用callback方法填充表格,这个在其他博客中又详细的介绍和demo。

2.数据格式

表格支持两种格式的数据源,一种是数据,另外一种是对象。当然,这仅仅是针对某一行的数据,表格所有数据自然是一行一行加起来的数组。对于某一行,如果是数组,那么数组的长度需要和表格的列数一致,如果是对象,对象需要包括所有列名对应的属性,详细demo会再其他博客中给出demo。

3.数据重新加载

由于dataTble不支持多次初始化,如果想重新加载表格数据,在不刷新页面的前提下,只能使用插件提供的接口:table.ajax.reload()。这个在相关博客里也有详细的demo。

二、所需资源

把这一块单独列出来,是因为当时花了不少时间,去把这款插件需要的js和css搜集全。官网给出都是链接,在web项目中,所需的资源自然不应该来自网络。

这个也会有详细的记载,包括主题的选择。

三、表格其他一些个性化的设置

--以下是关于表格编辑的介绍

相关推荐