Question

我能够连接到套接字并获取数据。但我无法在状态列中显示百分比。

我收到此错误：DataTables警告：table id = DataTables_Table_0 - 请求的未知参数＆＃39; null＆＃39;对于第0行。有关此错误的详细信息，请参阅http://datatables.net/tn/4。

如何解决此问题......

后端代码：

io.of('/socket_issue').on('connection', function (socket) {
        console.log("Socket connected :"+socket.id);

    });

var callback = function(state){
    console.log('received size in bytes', state.received);
    console.log('total size in bytes', state.total);
    console.log('percent', state.percent);

     io.of('/socket_issue').emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));

} 

progress(request('https://nodejs.org/dist/v0.12.7/node-v0.12.7.tar.gz'), {
    throttle:0,   
    delay: 0       
})
.on('progress', callback) 

.pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name))
.on('error', function (err) {
 console.log("error");  
})
.on('close', function (err){
console.log("Download Complete"); 
})

我在template.html中的代码：

 {
     "sTitle": "Status",
      align: 'Center', 
      "mData": null, 
      "bSortable": false, 
      "sClass": "head1", 
      "sWidth": "55px",
      "render": socket.on( 'message',   function (data, type, row, meta) {
          console.log(data);//Here I'm able to get socket data
          var percentage = JSON.parse(data).percent;
          if (data.IsDirectory) {
              return percentage;
          }else{
              return percentage;
          }
       })

  }
  ]   


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

我的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 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); });



  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": "55px",
            "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": "55px",
            "render":socket.on( 'message',   function (data, type, row, meta) {

                    console.log(data);
              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);

 });

});



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

我的截图：

Answer 1

我们来看看here：

DataTables中的每个单元格都会请求数据，当DataTables尝试获取单元格的数据但无法执行此操作时，它会触发警告，告诉您数据在预期的位置不可用。警告信息是：

DataTables警告：table id={id} - 请求的未知参数   '{parameter}'用于行`{row-index}，列{column-index}``where：

{id}将替换为已触发的表的DOM ID   error {parameter}是DataTables所在的数据参数的名称   请求{row-index}是DataTables内部行索引   （row().index()）表示已触发错误的行。   {column-index}是列的数据索引（column().index()）   已触发错误的列。列索引信息是   在DataTables 1.10.10中添加。所以要分解它，DataTables有   请求的{parameter}提供的给定行的数据   那里没有数据，或者它是null或未定义（DataTables不知道，   默认情况下如何显示这些参数 - 如果您的数据，请参见下文   确实包含这些值。）

您收到此提醒，因为您在构建数据库时将null值设置为mData属性。 Here描述了将null设置为值时发生的情况：

null - sDefaultContent选项将用于单元格（默认为null，因此您需要指定所需的默认内容 - 通常为空字符串）。这对生成的列很有用，例如编辑/删除操作列。

因此，要摆脱此警报，您应该设置sDefaultContent属性：

aoColumns": [
      {
        "sTitle":"File Name", 
        "mData": null, 
        sDefaultContent: '',
        "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>";
          }
        }
      },

请记住，每列都应该使用它。

<强> PS：如果使用.emit()方法发送数据，则应将对象作为参数传递。但是，在提供的代码中，您传递的是json字符串。如果要通过套接字发送字符串，请使用.send()方法：

io.of('/socket_issue').send('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));

但我建议你传递一个对象：

io.of('/socket_issue').emit('message', {size: state.total, received: state.received, percent: state.percent, fileName: file_name});

在这种情况下，您不应该在正面使用JSON.parse(data)，因为它不再是字符串。变化：

 var percentage = JSON.parse(data).percent;

要：

 var percentage = data.percent;

如何获得状态＆＃34;中的进度状态使用socket.io的数据表的列

1 个答案: