Created
August 1, 2024 19:27
-
-
Save a-h/1fb5b3922486d977ebbfc6685e0f49f6 to your computer and use it in GitHub Desktop.
Example of server-side passing data via attribute
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package main | |
| import ( | |
| "fmt" | |
| "net/http" | |
| ) | |
| templ page(data any) { | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Page</title> | |
| <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> | |
| <script src="https://cdn.datatables.net/2.1.3/js/dataTables.min.js"></script> | |
| <link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.min.css"/> | |
| </head> | |
| <body> | |
| <table id="table123" data-rows={ templ.JSONString(data) }></table> | |
| <script> | |
| $("#table123").DataTable({ | |
| data: $("#table123").data("rows"), | |
| columns: [ | |
| { data: 'name' }, | |
| { data: 'position' }, | |
| { data: 'office' }, | |
| { data: 'extn' }, | |
| { data: 'startDate' }, | |
| { data: 'salary' }, | |
| ], | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| } | |
| func main() { | |
| http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { | |
| data, err := getData() | |
| if err != nil { | |
| //TODO: Log the error. | |
| http.Error(w, "failed to get data", http.StatusInternalServerError) | |
| return | |
| } | |
| templ.Handler(page(data)).ServeHTTP(w, r) | |
| }) | |
| fmt.Println("Listening on localhost:8080") | |
| http.ListenAndServe("localhost:8080", nil) | |
| } | |
| func getData() (data []Row, err error) { | |
| // Could get the data directly from the DB. | |
| data = []Row{ | |
| { | |
| "Tiger Nixon", | |
| "System Architect", | |
| "Edinburgh", | |
| "5421", | |
| "2011-04-25", | |
| "$320,800", | |
| }, | |
| { | |
| "Garrett Winters", | |
| "Accountant", | |
| "Tokyo", | |
| "8422", | |
| "2011-07-25", | |
| "$170,750", | |
| }, | |
| { | |
| "Ashton Cox", | |
| "Junior Technical Author", | |
| "San Francisco", | |
| "1562", | |
| "2009-01-12", | |
| "$86,000", | |
| }, | |
| { | |
| "Cedric Kelly", | |
| "Senior Javascript Developer", | |
| "Edinburgh", | |
| "6224", | |
| "2012-03-29", | |
| "$433,060", | |
| }, | |
| { | |
| "Airi Satou", | |
| "Accountant", | |
| "Tokyo", | |
| "5407", | |
| "2008-11-28", | |
| "$162,700", | |
| }, | |
| { | |
| "Brielle Williamson", | |
| "Integration Specialist", | |
| "New York", | |
| "4804", | |
| "2012-12-02", | |
| "$372,000", | |
| }, | |
| { | |
| "Herrod Chandler", | |
| "Sales Assistant", | |
| "San Francisco", | |
| "9608", | |
| "2012-08-06", | |
| "$137,500", | |
| }, | |
| { | |
| "Rhona Davidson", | |
| "Integration Specialist", | |
| "Tokyo", | |
| "6200", | |
| "2010-10-14", | |
| "$327,900", | |
| }, | |
| { | |
| "Colleen Hurst", | |
| "Javascript Developer", | |
| "San Francisco", | |
| "2360", | |
| "2009-09-15", | |
| "$205,500", | |
| }, | |
| { | |
| "Sonya Frost", | |
| "Software Engineer", | |
| "Edinburgh", | |
| "1667", | |
| "2008-12-13", | |
| "$103,600", | |
| }, | |
| } | |
| return data, nil | |
| } | |
| type RowData struct { | |
| Data []Row `json:"data"` | |
| } | |
| type Row struct { | |
| Name string `json:"name"` | |
| Position string `json:"position"` | |
| Office string `json:"office"` | |
| Extn string `json:"extn"` | |
| StartDate string `json:"startDate"` | |
| Salary string `json:"salary"` | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment