JS Output w/ jquery

A Tech Talk on outputs using HTML and Javascript. This uses jquery for easy onscreen interaction and filtering.

Markdown Table

Google markdown cheat sheet and it lead you to an outline for how to make a table.

Language	Creator	Year	Latest Version
Python	Guido van Rossum	1991	3.11
C	Brian K. and Dennis R.	1978	C23
C++	Bjarne Stroustrup	1979	C++20
Java	James Gosling	1995	JDK 20
HTML	Tim Berners-Lee	1980	HTML5
JavaScript	Brendan Eich	1995	ES14
Bash	Brian Fox	1989	5.2
PowerShell	Jeffery Snover	2006	7.3
C#	Anders Hejlsberg	2000	C# 11.0
SQL	Donald C. and Raymond B.	1974	16.0

HTML Table

Google w3schools html table and it will lead you to a tutorial on how to make tables.

%%html
<table class="table">
    <thead>
        <tr>
            <th>Language</th>
            <th>Creator</th>
            <th>Year</th>
            <th>Latest Version</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Python</td>
            <td>Guido van Rossum</td>
            <td>1991</td>
            <td>3.11</td>
        </tr>
        <tr>
            <td>C</td>
            <td>Brian K. and Dennis R.</td>
            <td>1978</td>
            <td>C23</td>
        </tr>
        <tr>
            <td>C++</td>
            <td>Bjarne Stroustrup</td>
            <td>1979</td>
            <td>C++20</td>
        </tr>
        <tr>
            <td>Java</td>
            <td>James Gosling</td>
            <td>1995</td>
            <td>JDK 20</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>Tim Berners-Lee</td>
            <td>1980</td>
            <td>HTML5</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Brendan Eich</td>
            <td>1995</td>
            <td>ES14</td>
        </tr>
        <tr>
            <td>Bash</td>
            <td>Brian Fox</td>
            <td>1989</td>
            <td>5.2</td>
        </tr>
        <tr>
            <td>PowerShell</td>
            <td>Jeffery Snover</td>
            <td>2006</td>
            <td>7.3</td>
        </tr>
    </tbody>
</table>

Language	Creator	Year	Latest Version
Python	Guido van Rossum	1991	3.11
C	Brian K. and Dennis R.	1978	C23
C++	Bjarne Stroustrup	1979	C++20
Java	James Gosling	1995	JDK 20
HTML	Tim Berners-Lee	1980	HTML5
JavaScript	Brendan Eich	1995	ES14
Bash	Brian Fox	1989	5.2
PowerShell	Jeffery Snover	2006	7.3

HTML Table with JavaScript jquery

JavaScript is a programming language that works with HTML data, CSS helps to style that data. In this example, we are using JavaScript and CSS that was developed by others (3rd party). JavaScript works in the backend as a programming language, while HTML displays that as a markup language.

One HUGE benefit of using JS for tables is the ability to sort based on specific fields, search, display multiple pages, and a lot more customizability
JS in general allows for more flexibility in web development

%%html

<!-- Head contains information to Support the Document -->
<head>
    <!-- load jQuery and DataTables output style and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

<!-- Body contains the contents of the Document -->
<body>
    <table id="demo" class="table">
        <thead>
            <tr>
                <th>Language</th>
                <th>Creator</th>
                <th>Year</th>
                <th>Latest Version</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Python</td>
                <td>Guido van Rossum</td>
                <td>1991</td>
                <td>3.11</td>
            </tr>
            <tr>
                <td>C</td>
                <td>Brian K. and Dennis R.</td>
                <td>1978</td>
                <td>C23</td>
            </tr>
            <tr>
                <td>C++</td>
                <td>Bjarne Stroustrup</td>
                <td>1979</td>
                <td>C++20</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>James Gosling</td>
                <td>1995</td>
                <td>JDK 20</td>
            </tr>
            <tr>
                <td>HTML</td>
                <td>Tim Berners-Lee</td>
                <td>1980</td>
                <td>HTML5</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>Brendan Eich</td>
                <td>1995</td>
                <td>ES14</td>
            </tr>
            <tr>
                <td>Bash</td>
                <td>Brian Fox</td>
                <td>1989</td>
                <td>5.2</td>
            </tr>
            <tr>
                <td>PowerShell</td>
                <td>Jeffery Snover</td>
                <td>2006</td>
                <td>7.3</td>
            </tr>
            <tr>
                <td>C#</td>
                <td>Anders Hejlsberg</td>
                <td>2000</td>
                <td>C# 11.0</td>
            </tr>
            <tr>
                <td>SQL</td>
                <td>Donald C. & Raymond B.</td>
                <td>1974</td>
                <td>16.0</td>
            </tr>
        </tbody>
    </table>
</body>

<!-- Script is used to embed executable code -->
<script>
    $("#demo").DataTable();
</script>

Language	Creator	Year	Latest Version
Python	Guido van Rossum	1991	3.11
C	Brian K. and Dennis R.	1978	C23
C++	Bjarne Stroustrup	1979	C++20
Java	James Gosling	1995	JDK 20
HTML	Tim Berners-Lee	1980	HTML5
JavaScript	Brendan Eich	1995	ES14
Bash	Brian Fox	1989	5.2
PowerShell	Jeffery Snover	2006	7.3
C#	Anders Hejlsberg	2000	C# 11.0
SQL	Donald C. & Raymond B.	1974	16.0

JS Output w/ jquery • 8 min read

Description

Markdown Table

HTML Table

HTML Table with JavaScript jquery