jTable在使用node.js插入MySQL后不显示新行内容

我有一个小小的jTable，它显示了使用node.js和express generator以及mysql从本地数据库中提取的记录列表。我可以在我的表中显示、创建、编辑和删除记录

我的问题是，当我使用jTable添加新记录时，它会在jTable中创建一个空行，并且除非我刷新页面，否则不会用新添加的数据填充它。这很奇怪，因为当我使用jTable编辑和删除它时，它成功地更新了jTable中的行

有人知道为什么会这样吗？
（我排除了编辑和删除代码，因为它们工作正常）

tbl_钢筋结构

rowID = INT, PK, AI
rowName = VARCHAR, UQ
rowOrder = INT (for future row organization)

doctype html
html
  head
    meta(charset='utf-8')
    |     
    title My jTable
    |     
    link(rel='stylesheet', type='text/css', href='javascripts/jquery-ui-1.11.4/jquery-ui.min.css')
    |     
    link(rel='stylesheet', type='text/css', href='javascripts/jtable.2.4.0/themes/metro/blue/jtable.min.css')
    |     
    script(type='text/javascript', src='javascripts/jquery-1.11.2.min.js')
    |     
    script(type='text/javascript', src='javascripts/jquery-ui-1.11.4/jquery-ui.min.js')
    |     
    script(type='text/javascript', src='javascripts/jtable.2.4.0/jquery.jtable.min.js')
    |     
    script(type='text/javascript', src='javascripts/table.js')
  |   
  body
    #container

index.js

var express = require('express');
var router = express.Router();

var mysql = require('mysql');
var connection = mysql.createConnection({
    host:     'localhost',
    user:     'root',
    password: 'password'
});

// Select which database to use
connection.query('USE db_foo;');

/*********************/
/***** SHOW ROWS *****/
/*********************/
// Retrieves all rows and sends them to the jTable for display
router.showRows = function (request, response) {
    // Query tbl_bar and return the ordered result/s
    connection.query('SELECT * FROM tbl_bar ORDER BY rowOrder;', function (error, result) {
        if (error) response.send({ Result: "ERROR", Message: "Error getting rows" });
        else response.send({ Result: "OK", Records: result });
    });
}

/**********************/
/***** CREATE ROW *****/
/**********************/
// Function for inserting new row into tbl_bar
function insertRow(data, response) {
    connection.query('INSERT INTO tbl_bar SET ?', data, function(error, result) {
        if (error) response.send({ Result: "ERROR", Message: "Error adding row" });
        else response.send({ Result: "OK", Records: result });
    });
}
// Adds a new row to tbl_bar
router.createRow = function (request, response) {
    var query = JSON.parse(JSON.stringify(request.body));

    // Check if tbl_bar contains any rows
    connection.query('SELECT COUNT(*) AS rowCount FROM tbl_bar', function (error, result) {
        if (error) response.send({ Result: "ERROR", Message: "Error getting rows" });
        else {
            var data = {
                rowName: query.rowName
            };

            // If tbl_bar contains no rows, make rowOrder 1
            if (result[0].rowCount === 0) {
                data['rowOrder'] = 1;
                insertRow(data, response);
            } else {
                // Get the highest rowOrder to determine order of newly added row
                connection.query('SELECT rowOrder FROM tbl_bar ORDER BY rowOrder DESC LIMIT 1', function (error, result) {
                    if (error) response.send({ Result: "ERROR", Message: "Error getting rows" });
                    else {
                        data['rowOrder'] = result[0].rowOrder + 1;
                        insertRow(data, response);
                    }
                });
            }
        }
    });
}

/*************************/
/***** GET HOME PAGE *****/
/*************************/
router.get('/', function (request, response, next) {
    response.render('index', { title: 'My jTable' });
});

// Event listeners
router.post('/showRows', router.showRows);
router.post('/createRow', router.createRow);

module.exports = router;

function populateTable() {
    $('#container').jtable({
        title: 'My jTable',
        paging: false,
        messages: {
            addNewRecord: 'Add a New Row'
        },
        deleteConfirmation: function(data) {
            data.deleteConfirmMessage = 'Delete Row: ' + data.record.rowName + '?';
        },
        actions: {
            listAction:   '/showRows',
            createAction: '/createRow'
        },
        fields: {
            rowID: {
                key:    true,
                list:   false,
                create: false,
                edit:   false
            },
            rowName: {
                title:  'Name',
                list:   true,
                create: true,
                edit:   true
            },
            rowOrder: {
                list:   false,
                create: false,
                edit:   true
            }
        }
    });
}

$(document).ready(function () {    
    populateTable();
    $('#container').jtable('load');
});

table.js

var express = require('express');
var router = express.Router();

var mysql = require('mysql');
var connection = mysql.createConnection({
    host:     'localhost',
    user:     'root',
    password: 'password'
});

// Select which database to use
connection.query('USE db_foo;');

/*********************/
/***** SHOW ROWS *****/
/*********************/
// Retrieves all rows and sends them to the jTable for display
router.showRows = function (request, response) {
    // Query tbl_bar and return the ordered result/s
    connection.query('SELECT * FROM tbl_bar ORDER BY rowOrder;', function (error, result) {
        if (error) response.send({ Result: "ERROR", Message: "Error getting rows" });
        else response.send({ Result: "OK", Records: result });
    });
}

/**********************/
/***** CREATE ROW *****/
/**********************/
// Function for inserting new row into tbl_bar
function insertRow(data, response) {
    connection.query('INSERT INTO tbl_bar SET ?', data, function(error, result) {
        if (error) response.send({ Result: "ERROR", Message: "Error adding row" });
        else response.send({ Result: "OK", Records: result });
    });
}
// Adds a new row to tbl_bar
router.createRow = function (request, response) {
    var query = JSON.parse(JSON.stringify(request.body));

    // Check if tbl_bar contains any rows
    connection.query('SELECT COUNT(*) AS rowCount FROM tbl_bar', function (error, result) {
        if (error) response.send({ Result: "ERROR", Message: "Error getting rows" });
        else {
            var data = {
                rowName: query.rowName
            };

            // If tbl_bar contains no rows, make rowOrder 1
            if (result[0].rowCount === 0) {
                data['rowOrder'] = 1;
                insertRow(data, response);
            } else {
                // Get the highest rowOrder to determine order of newly added row
                connection.query('SELECT rowOrder FROM tbl_bar ORDER BY rowOrder DESC LIMIT 1', function (error, result) {
                    if (error) response.send({ Result: "ERROR", Message: "Error getting rows" });
                    else {
                        data['rowOrder'] = result[0].rowOrder + 1;
                        insertRow(data, response);
                    }
                });
            }
        }
    });
}

/*************************/
/***** GET HOME PAGE *****/
/*************************/
router.get('/', function (request, response, next) {
    response.render('index', { title: 'My jTable' });
});

// Event listeners
router.post('/showRows', router.showRows);
router.post('/createRow', router.createRow);

module.exports = router;

function populateTable() {
    $('#container').jtable({
        title: 'My jTable',
        paging: false,
        messages: {
            addNewRecord: 'Add a New Row'
        },
        deleteConfirmation: function(data) {
            data.deleteConfirmMessage = 'Delete Row: ' + data.record.rowName + '?';
        },
        actions: {
            listAction:   '/showRows',
            createAction: '/createRow'
        },
        fields: {
            rowID: {
                key:    true,
                list:   false,
                create: false,
                edit:   false
            },
            rowName: {
                title:  'Name',
                list:   true,
                create: true,
                edit:   true
            },
            rowOrder: {
                list:   false,
                create: false,
                edit:   true
            }
        }
    });
}

$(document).ready(function () {    
    populateTable();
    $('#container').jtable('load');
});

index.jade

rowID = INT, PK, AI
rowName = VARCHAR, UQ
rowOrder = INT (for future row organization)

doctype html
html
  head
    meta(charset='utf-8')
    |     
    title My jTable
    |     
    link(rel='stylesheet', type='text/css', href='javascripts/jquery-ui-1.11.4/jquery-ui.min.css')
    |     
    link(rel='stylesheet', type='text/css', href='javascripts/jtable.2.4.0/themes/metro/blue/jtable.min.css')
    |     
    script(type='text/javascript', src='javascripts/jquery-1.11.2.min.js')
    |     
    script(type='text/javascript', src='javascripts/jquery-ui-1.11.4/jquery-ui.min.js')
    |     
    script(type='text/javascript', src='javascripts/jtable.2.4.0/jquery.jtable.min.js')
    |     
    script(type='text/javascript', src='javascripts/table.js')
  |   
  body
    #container

---

在处理子表时，我遇到了相同的问题，但这次我找到了解决方案。为了让新行显示其数据，我需要用事件重新加载jTable。
可惜的是，我不能保持冷静的排褪色的效果

recordAdded: function (event, data) {
    $('#container').jtable('reload');
}

对于我的孩子，我用的是桌子

recordAdded: function (event, data) {
    $('.jtable-child-table-container').jtable('reload');
}

---

阅读代码时，您可以尝试更改insertRow函数中的这一行：

else-response.send（{Result:“OK”，Records:Result}）

到

else-response.send（{Result:“OK”，Record:Result}）


我也有同样的问题（jtable没有在新添加的行中显示数据），但是使用PHP

问题是我的PHP页面的JSON响应的格式

此格式（1元素数组）无法按预期工作：

{“结果”：“确定”，“记录”：[{“id_documento”：“96”，“id_prodotto”：“27”，“qta”：“5”}]}

此格式确实可以按预期工作，并具有淡入效果：

{“结果”：“确定”，“记录”：{“id_documento”：“96”，“id_prodotto”：“27”，“qta”：“5”}

在PHP中，区别在于（错误的方式）：

到（正确的方式）：

希望这有帮助