最近做项目掉在数据绑定这个小坑里了,最后发现问题其实很简单,只是官方的文档描述可能不太清除导致的吧。首先贴上官网地址: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的数据绑定问题的更多相关文章

  1. 【转】Devexpress使用之:GridControl控件(合并表头)

    Devexpress系列控件功能很强大,使用起来也不太容易,我也是边摸索边使用,如果有时间我会把常用控件的使用方法整理出来的. using System; using System.Collectio ...

  2. VSTO开发指南(VB2013版) 第二章 Office解决方案介绍

    实例2.1 通过控制台实现对Excel的自动化处理 书本第32页 注:添加两个引用: 第一个:程序集—框架—“System.Windows.Forms 4.0.0.0”第二个:程序集—扩展—“Micr ...

  3. c#数据绑定(2)——删除DataTable的数据

    文/嶽永鹏 c#数据绑定(1)中,简要的通过代码应用了DataTable,DataTableColumns,DataTableRow类,通过UI界面的Textbox向DataTable中添加数据然后响 ...

  4. Winform开发常用控件之DataGridView的简单数据绑定——代码绑定DataSet、DataTable、IList、SqlDataReader

    前文介绍了Winform为DataGridView提供的数据自动绑定功能,下面介绍一下采用代码的数据绑定 1.用DataSet和DataTable为DataGridView提供数据源 先上代码 pri ...

  5. 每日学习心得:Linq解决DataTable按照某一列的值排序问题/DataTable 导出CSV文件/巧用text-overflow解决数据绑定列数据展示过长问题

    2013-8-5 1 Linq解决DataTable按照某一列的值排序 在之前的总结中提到过对拼接而成的复合的DataTable按照某一列值的大小排序,那个主要的思想是在新建表结构时将要排序的那一列的 ...

  6. 自用的基于Emit的C#下DataTable转实体类方法

    之前一直在做WebForm的开发,数据绑定时直接DataTable绑定Gridview很方便,但是最近开始往MVC转,数据列表的传递和页面展示基本上是以List为主,像下面这样,遍历实体类的各个字段去 ...

  7. datatable和list的转换

    在开发中,把查询结果以DataTable返回很方便,但是在检索数据时又很麻烦,没有list<T>检索方便.但是数据以ILIST形式返回,就为我们在.NET中使用传统的数据绑定造成了不便.下 ...

  8. DataTable/集合 转 Json

    前端用的jqueryUI框架获取json格式数据绑定显示表格. 后端通过WebService获取的数据是DataTable. 现将获取DataTable转Json,也支持将数据集合转Json. 一.项 ...

  9. 数据绑定控件之Repeater

    引言 前几篇的文章在说AJAX的内容,利用AJAX技术能够开发出高效运行的网站应用程序,不过在进行B/S项目开发时只拥有AJAX技术是远远不够的,踏入到B/S要学的东西会更多,但相较C/S的复杂逻辑结 ...

随机推荐

  1. 文本处理三剑客之 grep/egrep

    grep:文本过滤工具 支持BRE egrep: 支持ERE fgrep: 不支持正则 作用:根据用户指定的“模式”,对目标文本逐行进行匹配检查,打印匹配到的行 模式:由正则表达式字符及文本字符所编写 ...

  2. kotlin使用anko在Android中实现Activity跳转,超优雅!

    //正常跳转 startActivity<RegisterActivity>() //携带参数 startActivity<ResetPwdActivity>("ke ...

  3. 2017-2018-1 20155313 《信息安全系统设计基础》 Myod

    2017-2018-1 20155313 <信息安全系统设计基础> Myod Myod要求 1.复习c文件处理内容 2.编写myod.c 用myod XXX实现Linux下od -tx - ...

  4. 20145234黄斐《网络对抗技术》实验九、Web安全基础实践

    PS:我是分了两次做的这次试验,第二次实验的时候电脑出了一点问题熄火了……原本后面的是有图的结果博客没保存图没了…… WebGoat WebGoat是由著名的OWASP负责维护的一个漏洞百出的J2EE ...

  5. 3 huigu

    w   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 组件复用 --------------- ...

  6. 2115: [Wc2011] Xor

    2115: [Wc2011] Xor 链接 分析: 对于图中的一个环,是可以从1到这个环,转一圈然后在回到1的,所以可以一开始走很多个环,然后在走一条1到n的路径. 那么可以求出所有的环,加入到线性基 ...

  7. 基于Vue的弹框实例

    看到博客的人,请养成写博客的习惯,不会不会,就怕曾经会过,现在想不起来了,一起加油....................  让学习真的成为一种习惯,同时要注意身体 <!DOCTYPE html ...

  8. 初窥Linux之我最常用的20条命令

    1.cd命令   这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切 ...

  9. SSIS 数据流的执行树和数据管道

    数据流组件的设计愿景是快速处理海量的数据,为了实现该目标,SSIS数据源引擎需要创建执行树和数据管道这两个数据结构,而用户为了快速处理数据流,必须知道各个转换组件的阻塞性,充分利用流式处理流程,利用更 ...

  10. 关于selenium的智能等待页面加载的问题

    我们经常会碰到用selenium操作页面上某个元素的时候,需要等待页面加载完成后,才能操作, 否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后,才能操作. 首 ...