Fatal编程技术网
  • socket.io/
  • 如何使用socket.io在datatable的status列中显示已下载文件的百分比

如何使用socket.io在datatable的status列中显示已下载文件的百分比

socket.io datatables

如何使用socket.io在datatable的status列中显示已下载文件的百分比,socket.io,datatables,Socket.io,Datatables,我如何才能在数据表的状态列中获得%。我真的被困在这里了。有人能帮我解决这个问题吗 socket.on( 'message', function( data ){ console.log(data); var percentage = data.percent; 我必须在此处插入百分比，以便它将显示在datatable的状态栏中的百分比中： {"sTitle":"Status",align: 'Center', "mData": null, "bSortable": false

我如何才能在数据表的状态列中获得%。我真的被困在这里了。有人能帮我解决这个问题吗

socket.on( 'message', function( data ){
    console.log(data);
    var percentage = data.percent;
我必须在此处插入百分比，以便它将显示在datatable的状态栏中的百分比中：

 {"sTitle":"Status",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "75px",
                "render": function (data, type, row, meta) {
                  if (data.IsDirectory) {
                     return  "";
                 }else{
                   return "";

                 } 
                }
              }
My template.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>File Browser</title>
    <link rel="stylesheet" href="/lib/bootstrap.min.css">
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/lib/app.css">
  </head>
  <body>
   <div id="panelDiv">

           <div class="panel-heading">
                   <button type="button" id="butDiv" >Browse</button>
                    <input type="text" name="location" size="35"/>
                   <span class="up">
                    <i class="fa fa-level-up"></i> Up
                   </span> 
           </div>
      <div id="showDiv" class="panel-body" >
              <table class="linksholder">
              </table>
      </div>

  </div> 
    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/bootstrap.min.js"></script>
    <script src="/lib/datatable/js/jquery.datatables.min.js"></script>
    <script src="/lib/socket.js"></script>

<script>


        var extensionsMap = {
                      ".zip" : "fa-file-archive-o",         
                      ".gz" : "fa-file-archive-o",         
                      ".bz2" : "fa-file-archive-o",         
                      ".xz" : "fa-file-archive-o",         
                      ".rar" : "fa-file-archive-o",         
                      ".tar" : "fa-file-archive-o",         
                      ".tgz" : "fa-file-archive-o",         
                      ".tbz2" : "fa-file-archive-o",         
                      ".z" : "fa-file-archive-o",         
                      ".7z" : "fa-file-archive-o",         
                      ".mp3" : "fa-file-audio-o",         
                      ".cs" : "fa-file-code-o",         
                      ".c++" : "fa-file-code-o",         
                      ".cpp" : "fa-file-code-o",         
                      ".js" : "fa-file-code-o",         
                      ".xls" : "fa-file-excel-o",         
                      ".xlsx" : "fa-file-excel-o",         
                      ".png" : "fa-file-image-o",         
                      ".jpg" : "fa-file-image-o",         
                      ".jpeg" : "fa-file-image-o",         
                      ".gif" : "fa-file-image-o",         
                      ".mpeg" : "fa-file-movie-o",         
                      ".pdf" : "fa-file-pdf-o",         
                      ".ppt" : "fa-file-powerpoint-o",         
                      ".pptx" : "fa-file-powerpoint-o",         
                      ".txt" : "fa-file-text-o",         
                      ".log" : "fa-file-text-o",         
                      ".doc" : "fa-file-word-o",         
                      ".docx" : "fa-file-word-o",         
                    };

$(document).ready(function(){

        $("#showDiv").hide();

});  

$("#butDiv").click(function(){
        $("#showDiv").show();

 });


  function getFileIcon(ext) {
    return ( ext && extensionsMap[ext.toLowerCase()]) || 'fa-file-o';
  }



  var currentPath = null;
   var options = {
        "bProcessing": true,
        "bServerSide": false,
        "bPaginate": false,
        "bAutoWidth": false,
         "sScrollY":"250px",
      "fnCreatedRow" :  function( nRow, aData, iDataIndex ) {
    if (!aData.IsDirectory) return;
    var path = aData.Path;
    $(nRow).bind("click", function(e){
        $.get('/files?path='+ path).then(function(data){
            table.fnClearTable();
            table.fnAddData(data);
            currentPath = path;
        });


        $.get('/directory?path='+ path).then(function(data){        
            $("input[name='location']").val(data.directory);

         });         
    e.preventDefault();
    });
},


        "aoColumns": [{"sTitle":"File Name", "mData": null, "bSortable": false, "sClass": "head0", "sWidth": "55px",
            "render": function (data, type, row, meta) {
              if (data.IsDirectory) {
                return "<a href='#' target='_blank'><i class='fa fa-folder'></i>&nbsp;"  + data.Name +"</a>";
              } else {
                return "<a href='/" + data.Path + "' target='_balnk'><i class='fa " + getFileIcon(data.Ext) + "'></i>&nbsp;" + data.Name +"</a>";
              }
            }
          },
            {"sTitle":"Date",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "75px",
            "render": function (data, type, row, meta) {
              if (data.IsDirectory) {
                 return  data.Date;
             }else{
               return data.Date;

             } 
            }
          },


        {"sTitle":"Status",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "75px",
            "render": function (data, type, row, meta) {
              if (data.IsDirectory) {
                 return  "";
             }else{
               return "";

             } 
            }
          }
        ]   


     };
    socket.on('disconnect', function(){})

  var table = $(".linksholder").dataTable(options);

  $.get('/files').then(function(data){
      table.fnClearTable();
      table.fnAddData(data);
  });

$.get('/directory').then(function(data){        
    $("input[name='location']").val(data.directory);
   $("#showDiv").hide();
});

$(".up").bind("click", function(e){
    if (!currentPath) return;
    var idx = currentPath.lastIndexOf("/");
    var path =currentPath.substr(0, idx);
    $.get('/files?path='+ path).then(function(data){
        table.fnClearTable();
        table.fnAddData(data);
        currentPath = path;
    });

$.get('/directory?path='+path).then(function(data){
    $("input[name='location']").val(data.directory);

 });

});

var socket = io('http://localhost:8089/socket_issue');
  socket.on('connect', function(){ console.log('connected to socket'); });
  socket.on('error', function(e){ console.log('error' + e); });
socket.on( 'message', function( data ){
console.log(data);
var percentage = data.percent;

});
  socket.on('disconnect', function(){});




</script>
</body>
</html>


文件浏览器
浏览
向上的
变量扩展映射={
.zip:“fa-file-archive-o”，
“.gz”：“fa-file-archive-o”，
.bz2:“fa-file-archive-o”，
.xz:“fa-file-archive-o”，
“.rar”：“fa-file-archive-o”，
“.tar”：“fa-file-archive-o”，
“.tgz”：“fa-file-archive-o”，
“.tbz2”：“fa-file-archive-o”，
.z:“fa-file-archive-o”，
.7z:“fa-file-archive-o”，
“.mp3”：“fa-file-audio-o”，
“.cs”：“fa-file-code-o”，
“.c++”：“fa-file-code-o”，
“.cpp”：“fa-file-code-o”，
.js:“fa-file-code-o”，
“.xls”：“fa-file-excel-o”，
“.xlsx”：“fa-file-excel-o”，
“.png”：“fa-file-image-o”，
“.jpg”：“fa-file-image-o”，
“.jpeg”：“fa-file-image-o”，
“.gif”：“fa-file-image-o”，
“.mpeg”：“fa-file-movie-o”，
“.pdf”：“fa-file-pdf-o”，
“.ppt”：“fa-file-powerpoint-o”，
“.pptx”：“fa-file-powerpoint-o”，
“.txt”：“fa-file-text-o”，
“.log”：“fa-file-text-o”，
“.doc”：“fa-file-word-o”，
“.docx”：“fa-file-word-o”，
};
$（文档）.ready（函数（）{
$（“#showDiv”）.hide（）；
});  
$（“#butDiv”）。单击（函数（）{
$（“#showDiv”）.show（）；
});
函数getFileIcon（ext）{
return（ext&&extensionsMap[ext.toLowerCase（）]）| |'fa-file-o'；
}
var currentPath=null；
变量选项={
“bProcessing”：正确，
“bServerSide”：false，
“bPaginate”：错误，
“bAutoWidth”：假，
“sScrollY”：“250px”，
“fnCreatedRow”：函数（nRow、aData、iDataIndex）{
如果（！aData.IsDirectory）返回；
var path=aData.path；
$（nRow）.绑定（“单击”，函数（e）{
$.get（'/files？path='+path）。然后（函数（数据）{
table.fnClearTable（）；
表fnAddData（数据）；
currentPath=路径；
});
$.get（'/directory？path='+path）。然后（函数（数据）{
$（“input[name='location']”）val（data.directory）；
});         
e、 预防默认值（）；
});
},
“aoColumns”：[{“sTitle”：“文件名”，“mData”：null，“bSortable”：false，“sClass”：“head0”，“sWidth”：“55px”，
“呈现”：函数（数据、类型、行、元）{
if（data.IsDirectory）{
返回“”；
}否则{
返回“”；
}
}
},
{“sTitle”：“Date”，align:“Center”，“mData”：null，“bSortable”：false，“sClass”：“head1”，“sWidth”：“75px”，
“呈现”：函数（数据、类型、行、元）{
if（data.IsDirectory）{
返回数据。日期；
}否则{
返回数据。日期；
} 
}
},
{“sTitle”：“Status”，align:“Center”，“mData”：null，“bSortable”：false，“sClass”：“head1”，“sWidth”：“75px”，
“呈现”：函数（数据、类型、行、元）{
if（data.IsDirectory）{
返回“”；
}否则{
返回“”；
} 
}
}
]   
};
socket.on（'disconnect'，function（）{}）
变量表=$（“.linksholder”）.dataTable（选项）；
$.get（'/files'）。然后（函数（数据）{
table.fnClearTable（）；
表fnAddData（数据）；
});
$.get（'/directory'）。然后（函数（数据）{
$（“input[name='location']”）val（data.directory）；
$（“#showDiv”）.hide（）；
});
$（“.up”）.bind（“单击”），函数（e）{
如果（！currentPath）返回；
var idx=currentPath.lastIndexOf（“/”）；
var path=currentPath.substr（0，idx）；
$.get（'/files？path='+path）。然后（函数（数据）{
table.fnClearTable（）；
表fnAddData（数据）；
currentPath=路径；
});
$.get（'/directory？path='+path）。然后（函数（数据）{
$（“input[name='location']”）val（data.directory）；
});
});
变量套接字=io（'http://localhost:8089/socket_issue');
on（'connect'，function（）{console.log（'connected to socket'）；}）；
on（'error'，函数（e）{console.log（'error'+e）；}）；
socket.on（'message'，函数（数据）{
控制台日志（数据）；
风险值百分比=数据百分比；
});
on（'disconnect'，function（）{}）；
我的截图：

可能重复的-请不要重复问题，最好改进或详细说明您的第一个问题..可能重复的