关于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的复杂逻辑结 ...
随机推荐
- iOS 内存管理之属性关键字
你好2019!一起努力呀! 主要分三种类型: 1.原子操作相关: nonatomic.atomic nonatomic:非原子操作,对属性赋值的时候不加锁,多线程并发访问会提高访问效率 atomic: ...
- hadoop环境搭建-伪分布模式
Appache hadoop 版本:2.77 jdk:1.8 系统:centos7 注意不要在root下解压,要单独建一个用户安装hadoop及其组件. 一.先查看系统是否有自带j #dk: r ...
- Keil C51编译报错error C141: syntax error
错误代码: typedef unsigned char uchar uchar KeyRowColumnScan() { GPIO_KEY = 0x0f; uchar key_value = ; // ...
- fixed fluid layout
<div id="fixed">Sidebar</div> <div id="fluid">Content</div& ...
- 根据URL地址获取域名
#coding:utf-8 import urllib #根据URL获取域名 def getdomain(url): proto, rest = urllib.splittype(url) host, ...
- Flash Player调试器版本的解决办法Flash Builder 找不到所需的Adobe
Flash Player调试器版本的解决办法Flash Builder 找不到所需的Adobe Flash Builder在Debug时出现的问题:Flash Builder 找不到所需的Adob ...
- flex拖动图片
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="htt ...
- WPF 访问资源中的Storyboard
原文:WPF 访问资源中的Storyboard <UserControl.Resources> <Storyboard x:Key="testStoryboard" ...
- HBase数据访问的一些常用方式
类型 特点 场合 优缺点分析 Native Java API 最常规和高效的访问方式 适合MapReduce作业并行批处理HBase表数据 Hbase Shell HBase的命令行工具,最简单的访问 ...
- 2-[Mysql]- 初识sql语句
1.统一字符编码 强调:配置文件中的注释可以有中文,但是配置项中不能出现中文 mysql> \s # 查看字符编码 # 1.在mysql的解压目录下,新建my.ini,然后配置 #mysql5 ...