如何将mysql数据加载到电子应用程序中的jquery数据表中
Posted
技术标签:
【中文标题】如何将mysql数据加载到电子应用程序中的jquery数据表中【英文标题】：How can I load mysql data into jquery datatable in electon app 【发布时间】：2019-11-15 08:13:57 【问题描述】：我使用带有 mysql 数据库和 jquery datatable 插件的 localhost 服务器制作了一个电子应用程序。如何将 MySQL 数据库中的数据加载到 datatable 中？
我已经能够在控制台中打印数据库中的数据，但我不知道如何使用我拥有的数据填充datatable
index.html 表格
<section role="main" id="main">
<div class="with-padding">
<table class="table responsive-table" id="sorting-advanced">
<thead>
<tr>
<th scope="col"><input type="checkbox" name="check-all" id="check-all" value="1"></th>
<th scope="col">Text</th>
<th scope="col" class="align-center hide-on-mobile">Date</th>
<th scope="col" class="align-center hide-on-mobile-portrait">Status</th>
<th scope="col" class="hide-on-tablet">Tags</th>
<th scope="col" class="align-center">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6">
6 entries found
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="checkbox-cell"><input type="checkbox" name="checked[]" id="check-1" value="1"></th>
<td id="name"></td>
<td id="date"></td>
<td id="status">Enabled</td>
<td><small class="tag">User</small> <small class="tag">Client</small> <small class="tag green-bg">Valid</small></td>
<td class="low-padding align-center"><a href="#" class="button compact icon-gear">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</section>
数据表脚本
<script>
var table = $('#sorting-advanced');
table.dataTable(
'aoColumnDefs': [
'bSortable': false,
'aTargets': [0, 5]
],
'sPaginationType': 'full_numbers',
'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
'fnInitComplete': function(oSettings)
// Style length select
table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
tableStyled = true;
);
</script>
preload.js
var con = mysql.createConnection(
host: "localhost",
user: "root",
password: "",
database: "mydb"
);
con.connect(function(err)
if (err) throw err;
con.query("SELECT * FROM customers", function(err, result, fields)
if (err) throw err;
let name = [this is what am getting no][1]document.getElementById("name");
let date = document.getElementById("date");
let status = document.getElementById("status");
console.log(result);
for (var i = 0; i < result.length; i++)
name.innerHTML += result[i].name + "<br/>";
date.innerHTML += result[i].address + "<br/>";
status.innerHTML += "enable" + "<br/>";
);
);
我想从datatable中的数据库中加载所有数据
screenshot of what I'm getting now
screenshot of what I want to achieve
【问题讨论】：
您想使用哪种技术来满足此要求？ php 或其他一些服务器端语言？单独使用jQuery，这可能是不可能的 我在 node js 环境中工作，有没有办法使用 javascript 解决这个问题？如果没有，那么我将如何在电子应用程序中使用 PHP 来实现这一点？谢谢 您的数据库在哪里？在任何服务器上？那么使用一些服务器端语言可能会更容易 我在我的电脑上使用 localhost 服务器，XAMPP 我已经编辑了我的代码，我现在已经能够显示它们，但是所有数据都出现在一个表格行中。我已经包含了我得到的和想要得到的截图。谢谢。 【参考方案1】：我终于弄清楚了如何实现结果并且它运行良好
html代码
<table id="datatable" class="table table-striped ">
<thead>
<tr>
<th>Room Number</th>
<th>Name</th>
<th>Reg Number</th>
<th>Program</th>
<!-- <th>Img</th> -->
</tr>
</thead>
<tbody id="tbdy">
</tbody>
<!--
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</tfoot> -->
</table>
脚本
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="assets/js/plugins/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function()
$('#datatable').DataTable(
"pagingType": "full_numbers",
"lengthMenu": [
[5, 25, 50, -1],
[5, 25, 50, "All"]
],
responsive: false,
language:
search: "_INPUT_",
searchPlaceholder: "Search records",
);
var table = $('#datatable').DataTable();
// Edit record
table.on('click', '.edit', function()
$tr = $(this).closest('tr');
var data = table.row($tr).data();
alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.');
);
// Delete a record
table.on('click', '.remove', function(e)
$tr = $(this).closest('tr');
table.row($tr).remove().draw();
e.preventDefault();
);
//Like record
table.on('click', '.like', function()
alert('You clicked on Like button');
);
);
</script>
渲染脚本
var mysql = require('mysql')
var con = mysql.createConnection(
host: "localhost",
user: "root",
password: "",
database: "mydb"
);
con.connect(function(err)
if (err) throw err;
con.query('SELECT * FROM customers', function(err, data)
if (err) throw err;
console.log(data.length)
var tbdy = document.getElementById('tbdy');
for (var i = 0; i < data.length; i++)
var tr = document.createElement('tr');
var td = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
td.appendChild(document.createTextNode(data[i].id));
td2.appendChild(document.createTextNode(data[i].name));
td3.appendChild(document.createTextNode(data[i].address));
td4.appendChild(document.createTextNode(data[i].img));
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tbdy.appendChild(tr);
);
);
【讨论】：
以上是关于如何将mysql数据加载到电子应用程序中的jquery数据表中的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Django ORM 将 JSON 文件中的数据加载到 MySQL 实例中？
用于将数据从谷歌电子表格加载到 bigquery 的独立脚本