Repository metrics
- Stars
- (5,980 stars)
- PR merge metrics
- (No merged PRs in 30d)
Description
I would like to connect to SQLite database to represent my data with Jquery DataTable (www.DataTable .net) on the front-end. All data are needed realtime, so it requires the script to read the database frequently, in every second. The problem is, that I have no idea how to pass the data - coming from Python - to Jquery DataTable. I tried to use the function that Eel expose, but I do not knwo how to change the explicit variable via expose script .
DataTable requires to bring the data through a veraiable (called dataSet). I initialized this variable at the start of the script as an empty Array - var dataSet = []; Then I asked Eel to change the value inside the script, replace the empty Array with the data. I also use some methods for cleaning. Finally I tried to call the dataSet variable in the Jquery DataTable script.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
<script src="eel.js"></script>
<script>
var dataSet = []; // varaible initialized as an empty Array, heading off to DataTable
function bringData(text) {
let step1 = text.replaceAll("[", "");
let step2 = step1.replaceAll("]", "");
let step3 = step2.replaceAll(", ",",");
var myArray = step3.split(",");
dataSet = myArray; // script to change explicit variable
}
eel.expose(bringData);
// DataTable.net - import data script
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet, // variable with data
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" },
{ title: "Salary" }
]
} );
} );
</script>
</head>
<body>
<h1>Hello World!</h1>
<p>Text will appear here:</p>
<div id="content"></div>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
import time
import eel
from model import Base, session, engine , Project, Task, Contact
from datetime import datetime as dt
if __name__ == '__main__':
Base.metadata.create_all(engine)
eel.init("html")
eel.start("index.htm", block=False)
projects = '[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320, 800", "222" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170, 750", "222"]'
while True:
timestamp = dt.now()
eel.addText(projects)
eel.sleep(1.0)
- Win 10
- Browser [Chrome, ]
- Version [0.14.0]