关于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最好不要引用压缩版，因为压缩版相当于是加密了的很不方便查找错误，直接引用未压缩的可以很方便的看到底层的代码已经修改错误。