最近做项目掉在数据绑定这个小坑里了,最后发现问题其实很简单,只是官方的文档描述可能不太清除导致的吧。首先贴上官网地址: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. plupload分片上传视频文件源码展示

    plupload分片上传视频文件目录结构如下: |- images//视频上传小图片 |-js// plupload js文件 |-uploads//视频文件存放文件夹 里面是按日期存放 |-ajax ...

  2. 【转载】WCF 客户端识别认证之UserName认证

    原文地址: http://blog.csdn.net/zxz414644665/article/details/9308055 过程:用户调用service,服务端验证用户传来的用户名和密码(传输过程 ...

  3. Flash Player调试器版本的解决办法Flash Builder 找不到所需的Adobe

    Flash Player调试器版本的解决办法Flash Builder 找不到所需的Adobe   Flash Builder在Debug时出现的问题:Flash Builder 找不到所需的Adob ...

  4. 【转载】COM 组件设计与应用(十四)——事件和通知(vc.net)

    原文:http://vckbase.com/index.php/wv/1244.html 一.前言 我的 COM 组件运行时产生一个窗口,当用户双击该窗口的时候,我需要通知调用者: 我的 COM 组件 ...

  5. 02-分页器,自定义分页器,解耦函数分页器,分页器class

    1 .批量数据导入 主url from django.contrib import admin from django.urls import path, re_path, include urlpa ...

  6. 【HNOI2017】单旋

    题面 题解 trajan的spaly是O(1)的(逃 通过看题解手玩发现只要将最值的点放到树根,其他的父子关系不需要变. 于是想到动态连边和断边的数据结构:\(\mathrm{LCT}\),于是用\( ...

  7. 4515: [Sdoi2016]游戏

    4515: [Sdoi2016]游戏 链接 分析: 树链剖分 + 超哥线段树.注意细节. 代码: #include<cstdio> #include<algorithm> #i ...

  8. C语言编译过程以及gcc编译参数

    1.1       C语言编译过程,gcc参数简介 1.1.1          C语言编译过程 一.gcc - o a a.c -o:指定文件输出名字 二.C语言编译的过程: 1.1.1       ...

  9. 【oracle】oracle常用命令汇总

    查看数据库状态(普通用户登录要保证数据库是open状态) SQL> select status from v$instance; 创建用户(新用户需要授予连接权限才能连上数据库) SQL> ...

  10. UWP 滚动条私人定制

    最近突然发现微软自带的滚动条好挫哦 微软哒(棒棒哒) 网上找的(美美哒) 好了. 如果你想要棒棒哒,那么就不用往下看了(手动再见). 如果你想要美美哒,就需要下面的神秘代码. <Style Ta ...