TableSorter 2.0没有检测到解析器

问题描述 投票：1回答：2

我正在尝试使用此处的TableSorter 2包进行表格排序：https://mottie.github.io/tablesorter/docs/#Introduction。理想情况下，我想从服务器提取数据，然后实时更新或点击排序选项。现在数据全部填充，但是当你点击标题时数据没有排序。我错过了一些明显的东西吗

的index.html

<!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>

index.js

function getCurrentMembers() {
    $.get('memberstatus', (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>`)
            }
        });
    });
    $("#techtable").tablesorter({ debug:true });
}
$('document').ready(function(){

    getCurrentMembers();
});

控制台出错

Detecting parsers for each column
jquery.tablesorter.min.js:1   No parsers detected!
jquery.tablesorter.min.js:1 Building cache for 0 rows (showing 0 rows in log) and 4 columns (0 ms)

Chrome的“网络”标签回复“memberstatus”

[{"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"}]

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);
    });
});
javascript jquery tablesorter
2个回答
1
投票

现在数据全部填充，但是当你点击标题时数据没有排序。

您可以添加sortlist属性：

$("#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(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>`)
    }
});
$("#techtable").tablesorter({ sortList: [[0,0], [1,0], [2,0], [3,0]] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>


<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>
1
投票

我注意到在日志中它显示了在调用tablesorter函数之后出现的数据，即使它之前被调用过。 Console Output

我最终将.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 });
      }});
}

现在按预期工作。谢谢你的帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.