jQuery 使用 NodeJS 的数据表 & MySql
jQuery Datatable with NodeJS & MySql
我想显示我的数据表中的值。我打开我的 chrome 开发工具并转到网络选项卡、XHR 和 问题是,响应是一个 HTML 文档
服务器端代码:
router.get('/agents', (req, res) => {
let dB = req.dB;
let sql = 'SELECT * FROM tbl_users WHERE role_id = 3';
dB.query(sql, (err, agents) => {
if (err) throw err;
const data = { agents };
console.log(data);
res.render('dashboard/agents', data);
});
});
客户端脚本:
$('#agent_table').DataTable( {
processing: true,
serverSide: true,
ajax: {
url: '/administrator/agents',
type: 'GET',
dataSrc: 'agents'
},
columns: [
{ data: 'user_id' },
{ data: 'checked' },
{ data: 'first_name' },
{ data: 'middle_name' },
{ data: 'role_id' },
]
} );
客户端 htmlt:
<table id="agent_table" class="table table-striped table-bordered dt-responsive nowrap"
cellspacing="0" width="100%">
<thead>
<tr>
<th>User ID</th>
<th>
<div class="checkbox checkbox-success select_all">
<input class="styled" type="checkbox" id="check_all">
<label for="check_all" class="check_all_label">All</label>
</div>
</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
</table>
控制台登录服务器
{ agents: [ RowDataPacket {
user_id: 6,
first_name: 'Pamela',
middle_name: 'Pearl',
last_name: 'Sabes',
email: 'test@gmail.com',
password: '1bd07c9db7ae63c02f2ee75471727f58',
mobile_number: '09503713607',
invite_code: '',
birthday: 'Nov 29, 2005',
gender: 'Female',
address: '',
image: null,
contact_person: '',
contact_person_number: '',
role_id: 3,
longitude: '',
latitude: '',
medical_info: '',
is_verified: 1,
is_deleted: 0,
created_at: '0000-00-00 00:00:00',
updated_at: 2018-05-30T20:42:43.000Z } ] }
我认为问题出在您对 res.render 的使用上。因为根据 express 文档,res.render() 函数会编译您的模板,在其中插入局部变量,然后从这两个东西中创建 html 输出并发送。所以试试这个。
res.json(data)
var url = req.protocol + '://' + req.get('host');
var draw = req.body.draw;
var row = req.body.start;
var count = 1+parseInt(row);
var rowperpage = req.body.length; // Rows display per page
//var columnIndex = req.query.order[0]['column']; // Column index
//console.log(req.body.search);
var dataArr = [];
adminTagModel.CountTagsAll(dataArr, function (totalRecordsValid)
{
var tagDataobj = {
row : row,
rowperpage : rowperpage
};
adminTagModel.showTagsAll(tagDataobj, function (totalValid)
{
for (var i = 0; i < totalValid.length; i++)
{
dataArr.push({ 'count' : count++ ,'tag_name' : totalValid[i].tag_name,'action' : "<a href='"
+url+"/admin/tagdetails/"+totalValid[i].t_id+"' target='_blank' ><i class='fa fa-eye' alt='View Detail'></i></a>"});
}
var response = {
"draw" : draw,
"iTotalRecords" : totalRecordsValid[0].allcount,
"iTotalDisplayRecords" : totalRecordsValid[0].allcount,
"aaData" : dataArr
};
res.send(response);
return response;
});
我想显示我的数据表中的值。我打开我的 chrome 开发工具并转到网络选项卡、XHR 和 问题是,响应是一个 HTML 文档
服务器端代码:
router.get('/agents', (req, res) => {
let dB = req.dB;
let sql = 'SELECT * FROM tbl_users WHERE role_id = 3';
dB.query(sql, (err, agents) => {
if (err) throw err;
const data = { agents };
console.log(data);
res.render('dashboard/agents', data);
});
});
客户端脚本:
$('#agent_table').DataTable( {
processing: true,
serverSide: true,
ajax: {
url: '/administrator/agents',
type: 'GET',
dataSrc: 'agents'
},
columns: [
{ data: 'user_id' },
{ data: 'checked' },
{ data: 'first_name' },
{ data: 'middle_name' },
{ data: 'role_id' },
]
} );
客户端 htmlt:
<table id="agent_table" class="table table-striped table-bordered dt-responsive nowrap"
cellspacing="0" width="100%">
<thead>
<tr>
<th>User ID</th>
<th>
<div class="checkbox checkbox-success select_all">
<input class="styled" type="checkbox" id="check_all">
<label for="check_all" class="check_all_label">All</label>
</div>
</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
</table>
控制台登录服务器
{ agents: [ RowDataPacket { user_id: 6, first_name: 'Pamela', middle_name: 'Pearl', last_name: 'Sabes', email: 'test@gmail.com', password: '1bd07c9db7ae63c02f2ee75471727f58', mobile_number: '09503713607', invite_code: '', birthday: 'Nov 29, 2005', gender: 'Female', address: '', image: null, contact_person: '', contact_person_number: '', role_id: 3, longitude: '', latitude: '', medical_info: '', is_verified: 1, is_deleted: 0, created_at: '0000-00-00 00:00:00', updated_at: 2018-05-30T20:42:43.000Z } ] }
我认为问题出在您对 res.render 的使用上。因为根据 express 文档,res.render() 函数会编译您的模板,在其中插入局部变量,然后从这两个东西中创建 html 输出并发送。所以试试这个。
res.json(data)
var url = req.protocol + '://' + req.get('host');
var draw = req.body.draw;
var row = req.body.start;
var count = 1+parseInt(row);
var rowperpage = req.body.length; // Rows display per page
//var columnIndex = req.query.order[0]['column']; // Column index
//console.log(req.body.search);
var dataArr = [];
adminTagModel.CountTagsAll(dataArr, function (totalRecordsValid)
{
var tagDataobj = {
row : row,
rowperpage : rowperpage
};
adminTagModel.showTagsAll(tagDataobj, function (totalValid)
{
for (var i = 0; i < totalValid.length; i++)
{
dataArr.push({ 'count' : count++ ,'tag_name' : totalValid[i].tag_name,'action' : "<a href='"
+url+"/admin/tagdetails/"+totalValid[i].t_id+"' target='_blank' ><i class='fa fa-eye' alt='View Detail'></i></a>"});
}
var response = {
"draw" : draw,
"iTotalRecords" : totalRecordsValid[0].allcount,
"iTotalDisplayRecords" : totalRecordsValid[0].allcount,
"aaData" : dataArr
};
res.send(response);
return response;
});