### jQuery UI DataTables API

Additional hints in using jQuery DataTables.
Reference: http://datatables.net/ref
Example Parameter fnClearTable
Parameter: fnClearTable
Config Type: API
Purpose: Quick and simple clear a table
Type: function
Inputs:
{bool} [default=true]: redraw the table or not
In JavaScript
$(document).ready(function() {
var oTable = $('#table1').dataTable();
oTable.fnClearTable();
} );
In B4J
`Sub Class_Globals
Private ws As WebSocket
...
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
' Get the websocket first
ws = WebSocket1
...
`Sub ClearTable(jq As JQueryElement, rs As ResultSet)
' Clear the table
ws.Eval("$(arguments[0]).dataTable().fnClearTable()", Array As Object(jq.Id))
End Sub`
'Example calling ClearTable
'Define the table
Private tblTasks As JQueryElement
' Clear the table
ws.Eval("$(arguments[0]).dataTable().fnClearTable()", Array As Object(tblTasks.Id))
Example Parameter fnAddData
Parameter: fnAddData
Config Type: API
Purpose: Add a single new row or multiple rows of data to the table.
Note that this is suitable for client-side processing only - if you are using server-side
processing (i.e. "bServerSide": true), then to add data, you must add it to the data source, i.e.
the server-side, through an Ajax call.
Parameter: fnAddData
Type: function
Inputs:
1. {array|object}: The data to be added to the table. This can be:
1D array of data - add a single row with the data provided
2D array of arrays - add multiple rows in a single call
object - data object when using mData
array of objects - multiple data objects when using mData
2. {bool} [default=true]: redraw the table or not
Returns:
{array}: An array of integers, representing the list of indexes
in aoData ({@link DataTable.models.oSettings}) that have been added to the table.
In JavaScript
//Global var for counter
var giCount = 2;
$(document).ready(function() {
$('#table1').dataTable();
} );
function fnClickAddRow() {
$('#table1').dataTable().fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4" ]
);
giCount++;
}
In B4J
`Sub Class_Globals
Private ws As WebSocket
...
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
ws = WebSocket1
...
`Sub FillTable(jq As JQueryElement, rs As ResultSet)
Dim data As List
data.Initialize
Do While rs.NextRow
Dim row As List
row.Initialize
For c = 0 To rs.ColumnCount - 1
Dim val As String = rs.GetString2(c)
row.Add(val)
Next
data.Add(row)
Loop
rs.Close
' (Re)load the data
ws.Eval("$(arguments[0]).dataTable().fnAddData(arguments[1])", Array As Object(jq.Id, data))
End Sub`
'Example calling FillTable
'Define the table
Private tblTasks As JQueryElement
'Fill the table. The Select Statement returns a ResultSet which is being used to populate the table
FillTable(tblTasks, Main.SQLite.ExecQuery("SELECT ID, [Task], [Description], Date FROM Tasks"))
````

Changed: , Category: WebApps jQuery, File: T6C280M2097.htm, ID: 2097