如何在“状态"中获取进度状态使用 socket.io 的数据表的列 [英] How to get the progress status in the "status" column of a datatable using socket.io
问题描述
我能够连接到套接字并获取数据.但我无法在状态列中显示百分比.
我收到此错误:DataTables 警告:table id=DataTables_Table_0 - 为第 0 行请求未知参数null".有关此错误的更多信息，请参阅
一起来看看这里:
<块引用>DataTables 中的每个单元格都请求数据，当 DataTables 尝试获取单元格的数据但无法获取时，它会触发警告，告诉您数据在预期位置不可用.警告信息是:
DataTables 警告:table id={id} - 请求未知参数'{parameter}' 用于行 `{row-index}，列{column-index}`` 其中:
{id} 被替换为触发该表的 DOM id错误 {parameter} 是数据参数 DataTables 的名称请求 {row-index} 是 DataTables 内部行索引(row().index()) 用于触发错误的行.{column-index} 是列数据索引 (column().index())已触发错误的列.列索引信息是在数据表 1.10.10 中添加.所以为了分解它，DataTables有为给定的行请求数据，提供的 {parameter} 和那里那里没有数据，或者为空或未定义(DataTables 不知道，默认情况下如何显示这些参数 - 如果您的数据，请参见下文确实包含这些值).
您收到此警报，因为您在构建数据包时将 null 值设置为 mData 属性.这里描述了当null被设置为值时会发生什么:
null - sDefaultContent 选项将用于单元格(默认情况下为 null，因此您需要指定所需的默认内容 - 通常为空字符串).这对生成的列(例如编辑/删除操作列)很有用.
因此，要消除此警报，您应该设置一个 sDefaultContent 属性:
aoColumns": [{"sTitle":"文件名",mData":空，sDefaultContent: '',bSortable":假，"sClass": "head0","sWidth": "55px",渲染":函数(数据，类型，行，元){如果(数据.IsDirectory){返回<a href='#' target='_blank'><i class='fa fa-folder'></i>>"+ data.Name +"";} 别的 {return "<a href='/" + data.Path + "' target='_balnk'><i class='fa " + getFileIcon(data.Ext) + "'></i>&;nbsp;"+ data.Name +"";}}},请记住，您应该对每一列都使用它.
附注:如果您使用 .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百分比 = JSON.parse(data).percent;致:
var 百分比 = data.percent;I'm able to connect to socket and get the data .But I'm unable to display the percent in the status column.
I'm getting this error : DataTables warning: table id=DataTables_Table_0 - Requested unknown parameter 'null' for row 0. For more information about this error, please see http://datatables.net/tn/4.
How to resolve this issue...
Backend code:
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");
})
My code in 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(){})
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 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> " + data.Name +"</a>";
} else {
return "<a href='/" + data.Path + "' target='_balnk'><i class='fa " + getFileIcon(data.Ext) + "'></i> " + 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>
My screenshot:
Let's take a look here:
Each cell in DataTables requests data, and when DataTables tries to obtain data for a cell and is unable to do so, it will trigger a warning, telling you that data is not available where it was expected to be. The warning message is:
DataTables warning:
table id={id}- Requested unknown parameter '{parameter}' for row `{row-index}, column{column-index}`` where:
{id}is replaced with the DOM id of the table that has triggered the error{parameter}is the name of the data parameter DataTables is requesting{row-index}is the DataTables internal row index (row().index()) for the row that has triggered the error.{column-index}is the column data index (column().index()) for the column that has triggered the error. The column index information was added in DataTables 1.10.10. So to break it down, DataTables has requested data for a given row, of the{parameter}provided and there is no data there, or it is null or undefined (DataTables doesn't know, by default how to display these parameters - see below if your data does contain these values).
You are getting this alert, because you are setting null value to mData property when you are building your databale. Here is described what happens when null is set as the value:
null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such as edit / delete action columns.
So, to get rid of this alert you should set a sDefaultContent property:
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> " + data.Name +"</a>";
} else {
return "<a href='/" + data.Path + "' target='_balnk'><i class='fa " + getFileIcon(data.Ext) + "'></i> " + data.Name +"</a>";
}
}
},
Keep in mind that you should to it for every column.
PS:
If you are using .emit() method to send data, you should pass an object as an argument. However, in the provided code you are passing a json string. if you want to send a string via socket, use .send() method:
io.of('/socket_issue').send('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));
But I would advise you to pass an object:
io.of('/socket_issue').emit('message', {size: state.total, received: state.received, percent: state.percent, fileName: file_name});
In this case you should not use JSON.parse(data) on the front side, since it is not a string anymore. Change:
var percentage = JSON.parse(data).percent;
To:
var percentage = data.percent;
这篇关于如何在“状态"中获取进度状态使用 socket.io 的数据表的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
