zoukankan      html  css  js  c++  java
  • 关于datatable的数据绑定问题

      最近做项目掉在数据绑定这个小坑里了,最后发现问题其实很简单,只是官方的文档描述可能不太清除导致的吧。首先贴上官网地址:http://www.datatables.club/

      关于这个插件的简单使用就不说了,按照官网来就可以了。在这里重点说一下数据绑定的问题:数据绑定的方式有四种,这里说一下ajax绑定数据的方式。因为我的数据绑定的时候报了这个错:

      当时真的感觉很神奇啊,怎么会length不存在呢?于是我就去看了看底层的代码。

    重点就是这个了,这个对象不存在他的length属性自然也就不存在了。这个对象怎么会不存在呢?

     框起来的部分就是我根据后台提供接口返回的数据,他要求的json数据格式和我接收到的数据格式不一样,这就是问题的原因了,最后我看了一下我绑定数据的这个代码:

     1 $('#exampleTwo').DataTable({
     2                 searching: false, //去掉搜索框方法一:百度上的方法,但是我用这没管用
     3                 bFilter: false, //去掉搜索框方法三:这种方法可以
     4                 bLengthChange: false, //去掉每页显示多少条数据方法
     5                 "paging": false, // 禁止分页
     6                 "ordering": false, // 禁止排序
     7                 "info": false, //底部文字
     8                 "ajax": ip + 'ZRTX/GetLeftTreeAndPeople?xzdm=611000', //数据源
     9                 "columns": [{
    10                         data: 'Name'
    11                     },
    12                     {
    13                         data: 'XZPeople'
    14                     },
    15                     {
    16                         data: 'XZPeopleBH'
    17                     },
    18                     {
    19                         data: 'XZDepertment'
    20                     },
    21                     {
    22                         data: 'JSPeople'
    23                     },
    24                     {
    25                         data: 'JSPeopleBH'
    26                     },
    27                     {
    28                         data: 'JSDepertment'
    29                     }
    30                 ]
    31             });

    又对了对官方的文档才发现了问题:

     官方的文档有很清楚的说明,不同的json数据格式,绑定数据的写法也是不同的,如果是直接返回的一个数组里面包含多个json对象,那么我那种写法是不对的,正确的写法是这样的:

     1 $('#exampleTwo').DataTable({
     2                 searching: false, //去掉搜索框方法一:百度上的方法,但是我用这没管用
     3                 bFilter: false, //去掉搜索框方法三:这种方法可以
     4                 bLengthChange: false, //去掉每页显示多少条数据方法
     5                 "paging": false, // 禁止分页
     6                 "ordering": false, // 禁止排序
     7                 "info": false, //底部文字
     8                 //"ajax": ip + 'ZRTX/GetLeftTreeAndPeople?xzdm=611000', //数据源
     9                 ajax: {
    10                     url: ip + 'ZRTX/GetLeftTreeAndPeople?xzdm=611000',
    11                     dataSrc: ''
    12                 },
    13                 "columns": [{
    14                         data: 'Name'
    15                     },
    16                     {
    17                         data: 'XZPeople'
    18                     },
    19                     {
    20                         data: 'XZPeopleBH'
    21                     },
    22                     {
    23                         data: 'XZDepertment'
    24                     },
    25                     {
    26                         data: 'JSPeople'
    27                     },
    28                     {
    29                         data: 'JSPeopleBH'
    30                     },
    31                     {
    32                         data: 'JSDepertment'
    33                     }
    34                 ]
    35             });

      ajax属性多了一个

       dataSrc: ''
      这样就对了,之前的那种写法是默认数据外层有data包裹的所以才会报错。
      
     还有一点要注意的就是字段名的问题,返回的json数据的字段名可以和显示的表格列名不一致,但是一定要写返回的json数据的字段名,否则会报错的。


     这个掉坑里我发现在写代码的时候引用插件的js最好不要引用压缩版,因为压缩版相当于是加密了的很不方便查找错误,直接引用未压缩的可以很方便的看到底层的代码已经修改错误。
  • 相关阅读:
    wget: command not found
    小程序循环多个picker选择器,实现动态增、减
    小程序 picker 多列选择器 数据动态获取
    有关https有的网站可以访问有的访问不了的问题
    微信小程序填坑之路
    linux如何搭建sftp服务器
    微信小程序模板中使用循环
    C#学习笔记(20)——使用IComparer(自己写的)
    C#学习笔记(19)——使用IComparer(百度文库)
    C#学习笔记(18)——C#构造函数中this和base的使用
  • 原文地址:https://www.cnblogs.com/fanlijin/p/9436215.html
Copyright © 2011-2022 走看看