### jQuery UI DataTable Example

Example of showing the records of a SQLite Database Table in a jQuery DataTable.
Access by using: http://localhost:51042 or use an IP address instead of localhost
The files used are:
datatableex4.b4j
datatableex4.b4j.meta
DBHelper.bas
DBUtils.bas
TableSocket.bas
WebUtils.bas
Objects\contacts.db
Objects\www\b4j_ws.js
Objects\www\index.html
DBUtils, WebUtils and B4J_WS can be obtained from the B4J Forum, like
http://www.b4x.com/android/forum/threads/webapp-hello-world-web-app.39808/#content
HTML - Index.html stored in the www folder
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact List</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<!-- B4J WebSockets client library -->
<script src="/b4j_ws.js"></script>
</head>
<body>
<a href="index.html">Refesh</a>
<hr>
<h1>Contact List</h1>
<div id="tableDiv">
<!--- Note: the class display used to display with formatting --->
<!--- Note: Adding the thead is a must else nothing is displayed --->
<table id="table1" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
<th>EMail</th>
<th>URL</th>
<th>Notes</th>
</tr>
</thead>
</table>
</div>
<script>
$(document).ready(function() {
// Connect to the B4Jserver and fetch the data = the handler teem.bas is called
b4j_connect("/ws");
});
</script>
</body>
</head>
HTML - b4j_ws.js is required
Get from here:
http://www.b4x.com/android/forum/threads/webapp-hello-world-web-app.39808/#content
B4J - datatableEx.b4j
#Region Project Attributes
#CommandLineArgs:
#MergeLibraries: True
#AdditionalJar: sqlite-jdbc-3.7.2
#End Region
`Sub Process_Globals
Public srvr As Server 'The webserver
Public DB As DBHelper 'Helper for the database operations
End Sub`
`Sub AppStart (Args() As String)
'Init the sqlite database - see dbhelper.bas
DB.Initialize
srvr.Initialize("srvr")
srvr.Port = 51042
'Add the table handler - see tablesocket.bas
srvr.AddWebSocket("/ws", "tablesocket")
'Assign the serverport and start the server
srvr.Start
'Do no forget to start the messageloop
StartMessageLoop
End Sub`
B4J - DBHelper.bas
'Class module
'Table: CREATE TABLE [contacts] ([ID] INTEGER PRIMARY KEY, [Name] TEXT, [Address] TEXT, [Phone] TEXT, [EMail] TEXT, [URL] TEXT, [Notes] TEXT);
'Name,Address,Phone,EMail,URL,Notes
'
`Sub Class_Globals
Public sqlObj As SQL
Public IsDBOpen As Boolean
Private Const DBName As String = "contacts.db"
End Sub`
'Initializes the object.
`Public Sub Initialize
Try
'Init the sqlite database
sqlObj.InitializeSQLite(File.DirApp, DBName, False)
IsDBOpen = True
Catch
IsDBOpen = False
Log("Error initializing the SQLite Database 'contacts.db'" & CRLF & LastException.Message)
End Try
End Sub`
`Public Sub GetContacts As List
Dim l As List : l.Initialize
If IsDBOpen Then
l = DBUtils.ExecuteMemoryTable(sqlObj, "SELECT * FROM CONTACTS ORDER BY Name DESC", Null, 0)
End If
Return l
End Sub`
B4J - TableSocket.bas
WebSocket class
`Sub Class_Globals
Private ws As WebSocket
Private table1 As JQueryElement
End Sub`
`Public Sub Initialize
'NOT USED BUT REQUIRED
End Sub`
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
Log("Connected")
ws = WebSocket1
'Build the map with the data and the datatable properties
'Sorting is disabled as the result of the select query is used (see Sub GetContacts)
Dim m As Map
m.Initialize
m.Put("aaData", Main.DB.GetContacts)
m.Put("bFilter",False)
m.Put("bPaginate": True)
m.Put("bSort": False)
table1.RunMethod("dataTable", Array As Object(m))
End Sub`
`Private Sub WebSocket_Disconnected
'NOT USED BUT REQUIRED
End Sub`

Changed: , Category: WebApps jQuery, File: T6C280M2094.htm, ID: 2094