Javascript 将文件扩展名图标添加到表列--col仅将扩展名显示为字符串

我有一个由JSON数据填充的数据表。共有三列，左边一列是文件扩展名图标，中间一列是文档名称（第三列是复选框）

我已经能够使第一列只填充Word文档图标，但不幸的是，这不是我想要的。我还让文档扩展字符串显示出来（而不是全部说“docx”，它们正确地说出了扩展名是什么）

对这个有什么想法吗

下面是一个包含表和虚拟数据的。它对我的代码不是100%准确，因为它缺少JSON数据，但它是类似的

JS代码段： 渲染表：

---

更新：

函数docType（文件名）{
让docxImg=“”
让msgImg=“”
让nrlImg=“”
让pdfImg=“”
让pptxImg=“”
让xlsImg=“”
让docStr=fileName.split（“.”）
对于（var i=0；i

我使用了一个示例JSON源代码，您可以根据需要进行更改。在AJAX请求中使用datasrc将很容易解决您的问题。如果您认为下面的If太多，那么使用switch case和array也可以解决这个问题

 "ajax": {
         "url": "jsonSourceHere",
         "dataSrc": function (json) {
                   for (var i = 0, ien = json.data.length; i < ien; i++) {

                        if(json.data[i][2].includes('docx')){
                             json.data[i][0]=docImg;
                            } 
                        else if(json.data[i][2].includes('pdf')){
                             json.data[i][0]=pdfImg;
                            }
                        else if(json.data[i][2].includes('xls')){
                             json.data[i][0]=pdfImg;
                            }
                        else if(json.data[i][2].includes('ppt')){
                             json.data[i][0]=pptImg;
                            }

                        }
                        return json.data;
                    },
                },

“ajax”：{
“url”：“jsonSourceHere”，
“dataSrc”：函数（json）{
for（var i=0，ien=json.data.length；i

Hey@shubham，谢谢你的回答。我得到了要渲染的图标，但文档标题在图标旁边重复（类似于“Template1[doc icon]”）。我将用我的代码更新我的文本正文。不过这绝对是一个开始。更新：没关系，我把

docStr[I]=docxImg

改为

return docStr…等等，只显示了图标。非常感谢。
$.noConflict();
    let tableRes = JSONfile.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {
      return {
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name,
        "Categories": obj.ResourceType.results.map(function(val) {
          return val.Label;
        }).join(";"),
        "Blank": "",
        "docImg": docType(obj.File.Name) // "Getting the docType of obj.File.Name"
      }
    })

$('#km-table-id').DataTable( {
      columns: [
        // { data: "Blank" },
        { data: "Categories" }, // hidden
        { data: "docImg" },
        { data: "Titles" } // must be in last position to respond w/ checkboxes
      ],
...etc

function docType(fileName) {
      let docxImg = "<img src='https://[redacted].docx.gif' />"
      let msgImg = "<img src='https://[redacted].msg.gif' />"
      let nrlImg = "<img src='https://[redacted].nrl.gif' />"
      let pdfImg = "<img src='https://[redacted].pdf.gif' />"
      let pptxImg = "<img src='https://[redacted].pptx.gif' />"
      let xlsImg ="<img src='https://[redacted].xls.gif' />"

      let docStr = fileName.split(".")
        for (var i = 0; i < docStr.length; i++) {        
          if (docStr[i].includes('docx'))  {   return docStr[i] = docxImg;  }
      else if (docStr[i].includes('doc'))   {   return docStr[i] = docxImg;  }
      else if (docStr[i].includes('DOCX'))  {   return docStr[i] = docxImg;  }
      else if (docStr[i].includes('rtf'))   {   return docStr[i] = docxImg;  }
      else if (docStr[i].includes('msg'))   {   return docStr[i] = msgImg;   }
      else if (docStr[i].includes('nrl'))   {   return docStr[i] = nrlImg;   }
      else if (docStr[i].includes('pdf'))   {   return docStr[i] = pdfImg;   }
      else if (docStr[i].includes('pptx'))  {   return docStr[i] = pptxImg;  }
      else if (docStr[i].includes('ppt'))   {   return docStr[i] = pptxImg;  }
      else if (docStr[i].includes('PPT'))   {   return docStr[i] = pptxImg;  }
      else if (docStr[i].includes('potx'))  {   return docStr[i] = pptxImg;  }
      else if (docStr[i].includes('xls'))   {   return docStr[i] = xlsImg;   }
        }


    } // docType()

 "ajax": {
         "url": "jsonSourceHere",
         "dataSrc": function (json) {
                   for (var i = 0, ien = json.data.length; i < ien; i++) {

                        if(json.data[i][2].includes('docx')){
                             json.data[i][0]=docImg;
                            } 
                        else if(json.data[i][2].includes('pdf')){
                             json.data[i][0]=pdfImg;
                            }
                        else if(json.data[i][2].includes('xls')){
                             json.data[i][0]=pdfImg;
                            }
                        else if(json.data[i][2].includes('ppt')){
                             json.data[i][0]=pptImg;
                            }

                        }
                        return json.data;
                    },
                },