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

    /* 建立中心设备 扫描外设(Discover Peripheral) 连接外设(Connect Peripheral) 扫描外设中的服务和特征(Discover Services And Chara ...

  2. JavaWeb基础—JDBC入门

    一.什么是JDBC JDBC全称为:Java Data Base Connectivity(java数据库连接),它主要由接口组成 二.JDBC原理概述 JDBC原理:其实就是一组规范(就是对类的规范 ...

  3. Ubuntu14.04 64位机上安装cuda8.0+cudnn5.0操作步骤

    查看Ubuntu14.04 64位上显卡信息,执行: lspci | grep -i vga lspci -v -s 01:00.0 nvidia-smi 第一条此命令可以显示一些显卡的相关信息:如果 ...

  4. 24-[jQuery]-属性,文档,位置,筛选

    1.jquery的属性操作 jquery对象有它自己的属性和方法,我们先研究一下jquery的属性操作.jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 h ...

  5. 洛咕 P3321 [SDOI2015]序列统计

    显然dp就是设\(f[i][j]\)表示dp了i轮,对m取膜是j的方案数 \(f[i][xy\mod m]=f[i-1][x]\times f[i-1][y]\) 这是\(O(nm^2)\)的 像我这 ...

  6. 设置 idea 运行前不去检查其他类的错误的方法

    问题描述 MainClass为要运行的正常类,目录下存在一个类ErrorClass有错误,运行MainClass时会无法运行. 现在需要忽略ErrorClass中的错误,执行MainClass中的代码 ...

  7. pycharm如何显示工具栏

    1.没有工具栏的效果图如下: 2.在view中找到Toolbar打上勾即可显示: 3.工具栏设置成功显示效果图如下: 3.如何显示一个类或方法所在的文件,以及该文件下的所有方法,可以快速定位到该行

  8. nginx 配置 ssl 双向证书

    CA 根证书制作 # 创建 CA 私钥 openssl genrsa -out ca.key 2048 #制作 CA 根证书(公钥) openssl req -new -x509 -days 3650 ...

  9. Python无参装饰器

    需求:想要在test_func函数前后执行一些代码   1.第一步(定义函数,将调用原函数,使用新函数替换) def test_func(): return 'test_func' def test_ ...

  10. sqlite导入mysql

    在线阅读地址 http://wenku.baidu.com/view/cc6821a8482fb4daa58d4bb8