主页 › 站点内容

js插件 datatables 在使用 buttons excelHtml5 把表格导出成excel时， 比较长的数字内容往往会降低精度，后面几位变成0，或者变成科学计数法

周五, 2021-04-23 17:14 — 刘世伟

比如身份证号码， 会被变成科学计数法， 或者把最后几位变成0,
因为在datatables在处理时， 会把纯数字的单元格，设为数字模式，这样就造成了问题。
这里给出一个解决方法 ，就是修改datatables.js  让它不处理长度超过15位的数字，让超过15位的数字， 保持文本格式

[code]

--- jszip-2.5.0_dt-1.10.24_b-1.7.0_b-html5-1.7.0_fh-3.1.8_datatables.min.js     2021-04-23 16:51:59.294590332 +0800
+++ jszip-2.5.0_dt-1.10.24_b-1.7.0_b-html5-1.7.0_fh-3.1.8_datatables.min.js     2021-04-23 16:51:59.294590332 +0800
@@ -27849,7 +27849,8 @@
                                        // TODO Need to provide the ability for the specials to say
                                        // if they are returning a string, since at the moment it is
                                        // assumed to be a number
-                                       if ( row[i].match && ! row[i].match(/^0\d+/) && row[i].match( special.match ) ) {
+                                       if ( row[i].length < 15 &&
+                                               row[i].match && ! row[i].match(/^0\d+/) && row[i].match( special.match ) ) {
                                                var val = row[i].replace(/[^\d\.\-]/g, '');
 
                                                if ( special.fmt ) {
@@ -27872,6 +27873,7 @@
 
                                if ( ! cell ) {
                                        if ( typeof row[i] === 'number' || (
+                                               row[i].length < 15 &&
                                                row[i].match &&
                                                row[i].match(/^-?\d+(\.\d+)?$/) &&
                                                ! row[i].match(/^0\d+/) )
[/code]

对于压缩的js文件， 搜索特征字符串"\/\^0" 然后在前后修改2处:
-if(k[l].match&&!k[l].match(/^0\d+/)&&k[l].match(L.match)){A=k[l].replace(/[^\d\.\-]/g,"");L.fmt&&(A=L.fmt(A));A=y(f,"c",{attr:{r:G,s:L.style},children:[y(f,"v",{text:A})]});break}}A||("number"===typeof k[l]||k[l].match&&k[l].match(/^-?\d+(\.\d+)?$/)&&
+if(k[l].length<15&&k[l].match&&!k[l].match(/^0\d+/)&&k[l].match(L.match)){A=k[l].replace(/[^\d\.\-]/g,"");L.fmt&&(A=L.fmt(A));A=y(f,"c",{attr:{r:G,s:L.style},children:[y(f,"v",{text:A})]});break}}A||("number"===typeof k[l]||k[l].length<15&&k[l].match&&k[l].match(/^-?\d+(\.\d+)?$/)&&
 
 
 
顺便再说一下另一个问题， datatables在tr上增加了一个设置:强制背景为#fff,这样就会覆盖我们自己的一些tr的背景设置，
在datatables的css里， 可以找出如下内容,进行删除
table.dataTable tbody tr{background-color:#fff}
 
 

在datatables里有几个排序的图标，(sort_asc_disabled.png,sort_asc.png,sort_both.png,sort_desc_disabled.png,sort_desc.png)
需要通过url加载， 路径比较难以处理，容易出404错误,
我们只需要建立一个css文件， 在datatable之后加载，把图片通过base64后放在css文件里，替换datatable里的url方式的图片.

/*把排序的提示图片，用base64嵌入到css中，解决图片url目录问题*/
table.dataTable thead .sorting{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7XQMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC)}
table.dataTable thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==) !important}
table.dataTable thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=) !important}
table.dataTable thead .sorting_asc_disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAW0lEQVQoz2NgoCm4w3Vnwh02wspK7/y6k01Ikdadx3f+37l9RxmfIsY7c4GKQHDiHUbcyhzvvIMq+3THBpci3jv7oIpAcMcdduzKEu/8vPMdDn/eiWQYBYMKAAC3ykIEuYQJUgAAAABJRU5ErkJggg==)}
table.dataTable thead .sorting_desc_disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAWUlEQVQoz2NgGAWDCtyJvPPzznc4/HknEbsy9js77vyHw313eHGZZ3PnE1TRuzuOuK1lvDMRqmzuHUZ87lO+cxuo6PEdLUIeyb7z604pYf+y3Zlwh4u2YQoAc7ZCBHH4jigAAAAASUVORK5CYII=)}