初始化表格时,要使用aoColumnDefs或者aoColumns属性给每一列设置属性。
无论列是否显示,表格中新加的数据,如果按照下列设置,则数据源每一列都不能少。例如:
aoColumnDefs : [
{"aTargets" : [0], "mData" : "name"},
{“aTargets” : [1], “mData” : “age”},
{“aTargets” : [2], “mData” : “salary”}
]
那么使用table.fnAddData(arrayData)时,arrayData的数据必须是:
[
{“name” : “Jim”, “age”: 20, “salary”: 1000000},
]
每个列对应的属性都不能少。
如果某一列对应的属性可能会缺失,则可以如下设置避免出错:
aoColumnDefs : [
{"aTargets" : [0], "mData" : "name"},
{“aTargets” : [1], “mData” : “age”},
{“aTargets” : [2], “mData” : function(source, type, val){
if(source.salary){
return source.salary;
}else{
return null;
}
}}
]
如果既不用aoColumnDefs也不用aoColumns给表格列设置属性,那么就得使用如下方式直接添加数据,而不能使用对象的方式:
dataTable.fnAddData(['Jim', 21, 1000000])
数据会按照顺序,原封不动的插入到单元格中。如果想在单元格中放入checkbox,可以直接用:
dataTable.fnAddData(['<input type="checkbox">', 21, 1000000])
如果某一列无“数据源”,则可以在初始化表格时如下设定:
"aoColumns": [
null,
null,
{ "mData": null }
]
也可以在aoColumnDefs中设置 mData : null
则添加数据时可以使用如下格式,缺少一列数据。
[
{“name” : “Jim”, “age”: 20},
]
分享到:
相关推荐
总结来说,jQuery DataTables插件为HTML表格提供了强大的功能和灵活性,无论是基础的排序和过滤,还是更复杂的自定义需求,都能满足。配合合理的配置和API使用,可以极大地提升网页数据管理的用户体验。
描述中进一步明确了本文档的知识点范围,主要介绍如何通过jQuery和datatables插件实现数据的增删改查功能,并且特别强调了与页面表格相关的操作技巧。这些技巧可能包括表格初始化设置、事件监听、数据请求的配置和...
在Web开发中,数据展示和管理是一项常见的任务,而jQuery DataTables插件为此提供了一种高效且功能丰富的解决方案。本文将深入探讨jQuery DataTables及其相关的CSS,以及如何结合使用它们来提升网页表格的交互性和...
1. **样式兼容**:DataTables提供了Bootstrap主题,只需在CSS引用中加入对应的Bootstrap CSS,如`dataTables.bootstrap.min.css`,确保表格样式与Bootstrap保持一致。 2. **按钮扩展**:DataTables有内置的按钮插件...
《jQuery DataTables插件自定义Ajax分页实例解析》 在前端开发中,尤其是在处理大量数据展示时,分页功能显得尤为重要。jQuery DataTables是一款强大的表格插件,它提供了丰富的功能,包括排序、搜索和分页等。然而...
// 如果使用了DataTables插件,需要引入对应的库 $(document).ready(function() { $('#myTable').DataTable(); }); ``` 以上代码中,我们使用了DataTables插件,它提供了强大的表格功能,包括排序、过滤和分页。在...
1. **引入依赖**: 首先确保项目中已经包含了jQuery、DataTables以及对应的CSS和JS文件,如果使用Struts2,还需要引入Struts2-jQuery插件。 2. **HTML布局**: 创建一个基本的HTML表格,并为其附加DataTables初始化...
在本文中,我们将深入探讨如何使用Jquery dataTable插件来显示指定列,特别是在处理隐藏列的情况下。`Jquery dataTable` 是一个强大且功能丰富的JavaScript库,用于处理HTML表格,提供了排序、过滤、分页等特性,极...
在jQuery表格插件中,动态加载通常与分页结合使用,当用户滚动到底部时,自动加载下一页数据。这需要在插件中设置相应的监听事件,并配合Ajax请求实现。 四、Ajax Ajax(异步JavaScript和XML)是实现网页无刷新...
这个插件能够与Bootstrap 3/4、jQuery UI等前端框架完美融合,提供美观且易用的表格展示。 ### 安装 在开始使用DataTables之前,你需要从官方网站下载相应的文件。下载页面允许你自定义下载内容,如样式、扩展组件...
SSM整合Datatables实例Demo是将SpringMVC、Spring和MyBatis这三大流行Java Web框架集成,并结合Datatables插件实现数据展示和交互的示例项目。这个Demo旨在帮助开发者理解如何在实际项目中有效地利用这些技术进行...
1. **编辑表格**: jQuery插件如DataTables或Handsontable提供了一种简便的方法来实现表格的编辑功能。这些插件允许用户直接在表格单元格中输入、修改数据,并且支持排序、搜索、过滤等功能,提高了数据管理的效率。 ...
这些jQuery特效和插件涵盖了网页设计的各个方面,无论是基础功能增强还是复杂交互实现,都有对应的解决方案。学习和掌握这些特效和插件,将大大提高前端开发效率,创造出更富吸引力的网页应用。通过深入理解和实践...
**datatables 插件** ...总之,`datatables` 是一款强大且功能齐全的表格插件,能够帮助开发者创建功能丰富、用户体验优秀的数据展示界面。通过深入理解和充分利用其特性,可以大大提高Web应用的数据处理和展示效率。
在本文中,我们将深入探讨如何使用JQuery与DataTables插件来实现表格中行的增加和删除功能。DataTables是一款强大的jQuery插件,它能够使HTML表格具备丰富的数据处理和展示能力,包括排序、搜索、分页等。下面我们将...
JQuery DataTables插件提供了强大的数据表格功能,包括排序、搜索、分页和自定义样式,同时还支持服务器端处理和数据源的多样化。 4. **数据汇总(Summation)**:在大量数据中进行汇总计算是数据分析和报表展示的...
在本文中,我们将深入探讨如何在ASP.NET MVC 5项目中集成Jquery DataTables库进行数据展示和操作。`DataTablesAspNetMvcDemo`是一个示例项目,它清晰地展示了这一集成过程,帮助开发者理解如何在实际应用中实现高效...
Datatables是一款强大的jQuery插件,它能够帮助开发者实现数据的动态展示、排序、过滤和分页,极大地提高了用户体验。在Laravel中集成datatables,可以将后端的复杂逻辑与前端的交互体验完美结合。 首先,我们要...
“两个插件”可能指的是插件的多样性,jQuery 社区中有多个广受欢迎的分页插件,如 jQuery Pagination、jQuery UI Paginate 或 DataTables 的分页功能等。这些插件提供了丰富的配置选项和自定义样式,使得开发者可以...
DataTables 是一个强大的 jQuery 插件,用于将 HTML 表格转化为功能丰富的数据展示工具。在版本 1.8.0 中,它提供了许多高级功能,使得数据的管理和交互更加便捷,增强了用户体验。这个插件尤其适用于那些需要处理...