Expose script to change explicit variable

Open andrasaa opened this issue 3 years ago • 0 comments

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/[email protected]/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]

Mar 13 '22 12:03 andrasaa