关于datatable的数据绑定问题
最近做项目掉在数据绑定这个小坑里了,最后发现问题其实很简单,只是官方的文档描述可能不太清除导致的吧。首先贴上官网地址:http://www.datatables.club/
关于这个插件的简单使用就不说了,按照官网来就可以了。在这里重点说一下数据绑定的问题:数据绑定的方式有四种,这里说一下ajax绑定数据的方式。因为我的数据绑定的时候报了这个错:
当时真的感觉很神奇啊,怎么会length不存在呢?于是我就去看了看底层的代码。
重点就是这个了,这个对象不存在他的length属性自然也就不存在了。这个对象怎么会不存在呢?
框起来的部分就是我根据后台提供接口返回的数据,他要求的json数据格式和我接收到的数据格式不一样,这就是问题的原因了,最后我看了一下我绑定数据的这个代码:
$('#exampleTwo').DataTable({
searching: false, //去掉搜索框方法一:百度上的方法,但是我用这没管用
bFilter: false, //去掉搜索框方法三:这种方法可以
bLengthChange: false, //去掉每页显示多少条数据方法
"paging": false, // 禁止分页
"ordering": false, // 禁止排序
"info": false, //底部文字
"ajax": ip + 'ZRTX/GetLeftTreeAndPeople?xzdm=611000', //数据源
"columns": [{
data: 'Name'
},
{
data: 'XZPeople'
},
{
data: 'XZPeopleBH'
},
{
data: 'XZDepertment'
},
{
data: 'JSPeople'
},
{
data: 'JSPeopleBH'
},
{
data: 'JSDepertment'
}
]
});
又对了对官方的文档才发现了问题:
官方的文档有很清楚的说明,不同的json数据格式,绑定数据的写法也是不同的,如果是直接返回的一个数组里面包含多个json对象,那么我那种写法是不对的,正确的写法是这样的:
$('#exampleTwo').DataTable({
searching: false, //去掉搜索框方法一:百度上的方法,但是我用这没管用
bFilter: false, //去掉搜索框方法三:这种方法可以
bLengthChange: false, //去掉每页显示多少条数据方法
"paging": false, // 禁止分页
"ordering": false, // 禁止排序
"info": false, //底部文字
//"ajax": ip + 'ZRTX/GetLeftTreeAndPeople?xzdm=611000', //数据源
ajax: {
url: ip + 'ZRTX/GetLeftTreeAndPeople?xzdm=611000',
dataSrc: ''
},
"columns": [{
data: 'Name'
},
{
data: 'XZPeople'
},
{
data: 'XZPeopleBH'
},
{
data: 'XZDepertment'
},
{
data: 'JSPeople'
},
{
data: 'JSPeopleBH'
},
{
data: 'JSDepertment'
}
]
});
ajax属性多了一个
dataSrc: ''
这样就对了,之前的那种写法是默认数据外层有data包裹的所以才会报错。
还有一点要注意的就是字段名的问题,返回的json数据的字段名可以和显示的表格列名不一致,但是一定要写返回的json数据的字段名,否则会报错的。 这个掉坑里我发现在写代码的时候引用插件的js最好不要引用压缩版,因为压缩版相当于是加密了的很不方便查找错误,直接引用未压缩的可以很方便的看到底层的代码已经修改错误。
关于datatable的数据绑定问题的更多相关文章
- 【转】Devexpress使用之:GridControl控件(合并表头)
Devexpress系列控件功能很强大,使用起来也不太容易,我也是边摸索边使用,如果有时间我会把常用控件的使用方法整理出来的. using System; using System.Collectio ...
- VSTO开发指南(VB2013版) 第二章 Office解决方案介绍
实例2.1 通过控制台实现对Excel的自动化处理 书本第32页 注:添加两个引用: 第一个:程序集—框架—“System.Windows.Forms 4.0.0.0”第二个:程序集—扩展—“Micr ...
- c#数据绑定(2)——删除DataTable的数据
文/嶽永鹏 c#数据绑定(1)中,简要的通过代码应用了DataTable,DataTableColumns,DataTableRow类,通过UI界面的Textbox向DataTable中添加数据然后响 ...
- Winform开发常用控件之DataGridView的简单数据绑定——代码绑定DataSet、DataTable、IList、SqlDataReader
前文介绍了Winform为DataGridView提供的数据自动绑定功能,下面介绍一下采用代码的数据绑定 1.用DataSet和DataTable为DataGridView提供数据源 先上代码 pri ...
- 每日学习心得:Linq解决DataTable按照某一列的值排序问题/DataTable 导出CSV文件/巧用text-overflow解决数据绑定列数据展示过长问题
2013-8-5 1 Linq解决DataTable按照某一列的值排序 在之前的总结中提到过对拼接而成的复合的DataTable按照某一列值的大小排序,那个主要的思想是在新建表结构时将要排序的那一列的 ...
- 自用的基于Emit的C#下DataTable转实体类方法
之前一直在做WebForm的开发,数据绑定时直接DataTable绑定Gridview很方便,但是最近开始往MVC转,数据列表的传递和页面展示基本上是以List为主,像下面这样,遍历实体类的各个字段去 ...
- datatable和list的转换
在开发中,把查询结果以DataTable返回很方便,但是在检索数据时又很麻烦,没有list<T>检索方便.但是数据以ILIST形式返回,就为我们在.NET中使用传统的数据绑定造成了不便.下 ...
- DataTable/集合 转 Json
前端用的jqueryUI框架获取json格式数据绑定显示表格. 后端通过WebService获取的数据是DataTable. 现将获取DataTable转Json,也支持将数据集合转Json. 一.项 ...
- 数据绑定控件之Repeater
引言 前几篇的文章在说AJAX的内容,利用AJAX技术能够开发出高效运行的网站应用程序,不过在进行B/S项目开发时只拥有AJAX技术是远远不够的,踏入到B/S要学的东西会更多,但相较C/S的复杂逻辑结 ...
随机推荐
- C4C有关Browse and Collect的简单用法
Browse and Collect 最近在研究C4C中的Browse and Collect控件,有点类似于Siebel中的MVG.实现的效果就是在弹窗中简单的从一个BO对象往目标对象中添加数据. ...
- Linux下onvif客户端关于ipc摄像头的搜索
设备搜索:要访问一个IPC摄像头,或者说要调用IPC摄像头提供的WEB服务接口,就要先知道其IP地址,这就是设备发现的过程,或者叫设备搜索的过程.IPC摄像头用的是239.255.255.250(端口 ...
- Linux中定时删除超过指定大小的文件夹
背景: 开发环境总是动不动就没有空间了, 大部分都是debug日志.所以有必要在日志很疯狂的时候,删除不必要的日志. 思路:一. 书写删除日志文件脚本: 定时任务执行. 但是有时候的日志是需要保存用 ...
- 基于Babylon.js编写简单的骨骼动画生成器
使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...
- MacOS(10.11.6)+Qt(5.5.1)+Xcode(8.2) C++开发环境配置
VMware虚拟机安装MacOS(这里安装的是MacOS X 10.11.6), 百度很多, 不再详述. 安装Xcode(这里安装的是Xcode8.2) 下载(https://developer.ap ...
- MySQL数据表命令
显示表的相关信息: show table status like "表名": show table status like "表名" \G 格式化, ...
- 2017-2018-1 20155338 加分项目——PWD的实现
2017-2018-1 20155338 加分项目--PWD的实现 项目要求 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试 ...
- 如何启动 EDB*Plus
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页 由于EnterpriseDB公司的网站上讲的 ...
- 【HNOI2014】米特运输
题面 题解 首先我们需要看懂题目 然后我们需要发现一个结论 只要有一个节点的权值确定,那么整棵树的权值就确定了 就像这样:(图片来源于网络,侵删) 然后我们根据这张图片,可以设\(f[i] = a[i ...
- Unity3d之Hash&Slash学习笔记之(二)--角色基础类的构建
Hash&Slash学习笔记之(二)--角色基础类的构建 BaseStat类的构建 基本成员变量: _baseValue //基础属性值 _buffValue //增加的buff值 _expT ...