關於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最好不要引用壓縮版，因為壓縮版相當於是加密了的很不方便查找錯誤，直接引用未壓縮的可以很方便的看到底層的代碼已經修改錯誤。