Datatables info显示总数据出现“1undefined123”这种错误

      最近出了‘当配置记录多时,页面下方计算条数显示错误’的bug,问题影响不大,但是我找了两个多小时的资料都无果,所以记录一下这个问题的解决思路,以及复习一下js的基本语法。

bug截图:

Datatables info显示总数据出现“1undefined123”这种错误

       首先我们可以直观的看到是显示总数的地方,莫名的多了undefined的字样,从表象以及插件的使用上我们都知道,只要我们了解就知道这个信息的配置项实际就是一个info:true,但是为什么会出现这个问题,我们需要从源代码入手,去解读我们的源代码,才能找到最根本的问题所在。

源代码部分截图:

Datatables info显示总数据出现“1undefined123”这种错误

Datatables info显示总数据出现“1undefined123”这种错误

      了解插件使用的我们都知道_TOTAL_这个指的是我们在使用info这个配置项的时候,指代的是总数据,所以我先找到相关的源代码部分就是上图,然后我们在仔细分析问题的根因,以及不同的解决方法。

       我们可以看到他使用了str.replace(/_TOTAL_/g, formatter.call( settings, vis ) ).这个我们解读一下就是拿到我们配置的str,然后替换相关的参数为具体的值,但是具体的替换值,他使用了formatter.call( settings, vis )这个方法,我们再深入解读就是call的使用可以让原来方法中的this的指向改成了settings,因此导致this.oLanguage.sThousands取不到值成了undefined,实际this.oLanguage.sThousands=',',结果成了settings.oLanguage.sThousands的取值成了undefined.

 

解决方法如下:

    1.$.fn.dataTable.defaults.fnFormatNumber = function(v){return v};//这句添加到全局的执行块中,目的是让fnFormatNumber方法输入什么就返回什么,但是这样的解决方法并不是源代码的解决方案,源代码是想让大数据每隔三位数添加‘,’ ,如‘1235’改成‘1,235’这种显示方案

解决后的显示如下:

Datatables info显示总数据出现“1undefined123”这种错误

      2.既然改变了指向,我们就应该去看为什么settings.oLanguage.sThousands的取值成了undefined.,然后我们去找settings的配置项(如下图),我们可以看到原来是我们中英文配置文件里面属性的字段跟我们源代码的字段出现了出入,因此我们只要修改为"sThousands":  ","    就好了

Datatables info显示总数据出现“1undefined123”这种错误

正确的显示如下:

Datatables info显示总数据出现“1undefined123”这种错误

版权声明:本文为博主原创文章,未经博主允许不得转载。https://mp.csdn.net/postedit/81778576