Javascript TableSorter 2.0未检测到任何分析器
我正在尝试使用在以下位置找到的TableSorter 2包对表进行排序:。理想情况下,我希望从服务器中提取数据,然后实时更新,或者使用单击排序选项。现在所有的数据都会被填充,但是当你点击标题时,数据不会被排序。我错过了什么明显的东西吗 index.htmlJavascript TableSorter 2.0未检测到任何分析器,javascript,jquery,tablesorter,Javascript,Jquery,Tablesorter,我正在尝试使用在以下位置找到的TableSorter 2包对表进行排序:。理想情况下,我希望从服务器中提取数据,然后实时更新,或者使用单击排序选项。现在所有的数据都会被填充,但是当你点击标题时,数据不会被排序。我错过了什么明显的东西吗 index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/css/styles.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>
<title>LTIIT Phone Status</title>
</head>
<body>
<div class='container'>
<table id="techtable"class="table tablesorter">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Status</th>
<th scope="col">Queue</th>
<th scope="col">Call Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- Horizontal Line Divider -->
<hr>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
</html>
从Chrome的网络选项卡响应“memberstatus”
server.js NodeJS文件
//.env file in parent directory that holds variable values - TO BE EXCLUDED FROM GIT!
require('dotenv').config();
//SQLite3 Requirements
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database('UserStatus.db');
db.serialize(function() {
db.run("CREATE TABLE IF NOT EXISTS users (username TEXT,loggedin INTEGER, queue TEXT)");
});
//Express Web Server Requirements
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
//Start the server
const server = app.listen(process.env.Express_Port, () => console.log('Listening on port '+ process.env.Express_Port))
//Express Web uses
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname + '/public')));
//Express Get requests
app.get('/', (req,res) => {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.get('/memberstatus', (req,res) => {
//send back db information
db.all(`SELECT * FROM users`, (err,rows)=>{
if (err) throw err;
res.send(rows);
});
});
现在所有的数据都会被填充,但是当你点击标题时,数据不会被排序
您可以添加属性:
$("#techtable").tablesorter({ sortList: [[0,0], [1,0], [2,0], [3,0]] });
var data=[{“username”:“TestUser1”,“loggedin”:1,“queue”:“FirstResponder”},{“username”:“TestUser2”,“loggedin”:0,“queue”:“OFFLINE”},{“username”:“TestUser3”,“loggedin”:1,“queue”:“FirstResponder”},{“username”:“TestUser4”,“loggedin”:0,“queue”:“TestQueue”},{“username”:“TestUser5”,“loggedin”:1,“queue”:“TestQueue”};
data.forEach(元素=>{
membername=element.username.replace('/','');
membername=membername.replace('-',“”);
membername=membername.replace(“”,”);
if(element.loggedin==1){
$(“#techtable tbody”)。追加(`
${element.username}
在线 的
${element.queue}
准备好的
`)
}否则{
$(“#techtable tbody”)。追加(`
${element.username}
离线
离线
离线
`)
}
});
$(“#techtable”).tablesorter({sortList:[[0,0],[1,0],[2,0],[3,0]})代码>
用户名
地位
队列
呼叫状态
我注意到,在日志中,它显示了在调用tablesorter函数之后出现的数据,尽管它以前被调用过。
最后,我将.get调用更改为.ajax,并添加了以下完整选项:
$.ajax({url: "/memberstatus", dataType : "json",contentType :"application/json",method:"GET", success: function(data){
console.log(data);
data.forEach(element => {
membername = element.username.replace('/','');
membername = membername.replace('-',"");
membername = membername.replace(' ','');
if (element.loggedin == 1) {
$("#techtable tbody").append(`
<tr id="${membername}row">
<td id="${membername}">${element.username}</td>
<td id="${membername}status" class="text-success">Online</td>
<td id="${membername}queue">${element.queue}</td>
<td id="${membername}callstatus">Ready</td>
</tr>`)
} else {
$("#techtable tbody").append(`
<tr id="${membername}row">
<td id="${membername}">${element.username}</td>
<td id="${membername}status" class="text-danger">Offline</td>
<td id="${membername}queue">Offline</td>
<td id="${membername}callstatus">Offline</td>
</tr>`)
}
});
}, complete: function(){
$("#techtable").tablesorter({ sortList: [[0,0], [1,0], [2,0], [3,0]],debug:true });
}});
}
$.ajax({url:/memberstatus],数据类型:“json”,内容类型:“application/json”,方法:“GET”,成功:函数(数据){
控制台日志(数据);
data.forEach(元素=>{
membername=element.username.replace('/','');
membername=membername.replace('-',“”);
membername=membername.replace(“”,”);
if(element.loggedin==1){
$(“#techtable tbody”)。追加(`
${element.username}
在线 的
${element.queue}
准备好的
`)
}否则{
$(“#techtable tbody”)。追加(`
${element.username}
离线
离线
离线
`)
}
});
},完成:函数(){
$(“#techtable”).tablesorter({sortList:[[0,0],[1,0],[2,0],[3,0]],debug:true});
}});
}
现在一切正常。谢谢你的帮助。在这方面它很有效。为了进行调查,需要更多的细节。我想问题出在返回的数据值上。您好@gaetanoM,谢谢您的回复。我已经更新了原始帖子以显示返回的数据值。我有点不知所措,用上面的内容,我仍然得到“未检测到解析器!”。这是否与我将数据发送回网页的方式有关?我确实添加了sortList参数,但没有结果。没有检测到解析器:您确定没有空的或未定义的值或utf字符吗?我看不出来。JSON返回3个字段,而我的表中有4个字段,这有关系吗?第四行“呼叫状态”由星号VOIP服务器实时更新,不需要DB条目。这听起来很奇怪。在任何情况下,您都可以使用该数据类型或将其添加到数据库中。如果在此之前调用了tablesorted,则表示还有另一个调用。。。。谢谢分享
//.env file in parent directory that holds variable values - TO BE EXCLUDED FROM GIT!
require('dotenv').config();
//SQLite3 Requirements
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database('UserStatus.db');
db.serialize(function() {
db.run("CREATE TABLE IF NOT EXISTS users (username TEXT,loggedin INTEGER, queue TEXT)");
});
//Express Web Server Requirements
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
//Start the server
const server = app.listen(process.env.Express_Port, () => console.log('Listening on port '+ process.env.Express_Port))
//Express Web uses
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname + '/public')));
//Express Get requests
app.get('/', (req,res) => {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.get('/memberstatus', (req,res) => {
//send back db information
db.all(`SELECT * FROM users`, (err,rows)=>{
if (err) throw err;
res.send(rows);
});
});
$("#techtable").tablesorter({ sortList: [[0,0], [1,0], [2,0], [3,0]] });
$.ajax({url: "/memberstatus", dataType : "json",contentType :"application/json",method:"GET", success: function(data){
console.log(data);
data.forEach(element => {
membername = element.username.replace('/','');
membername = membername.replace('-',"");
membername = membername.replace(' ','');
if (element.loggedin == 1) {
$("#techtable tbody").append(`
<tr id="${membername}row">
<td id="${membername}">${element.username}</td>
<td id="${membername}status" class="text-success">Online</td>
<td id="${membername}queue">${element.queue}</td>
<td id="${membername}callstatus">Ready</td>
</tr>`)
} else {
$("#techtable tbody").append(`
<tr id="${membername}row">
<td id="${membername}">${element.username}</td>
<td id="${membername}status" class="text-danger">Offline</td>
<td id="${membername}queue">Offline</td>
<td id="${membername}callstatus">Offline</td>
</tr>`)
}
});
}, complete: function(){
$("#techtable").tablesorter({ sortList: [[0,0], [1,0], [2,0], [3,0]],debug:true });
}});
}