Hello there!
Two main questions for you
1)
Following the ServerExample by Erel I managed to fill a 3 column table with a HUGE query (about 1500 rows...).
I noticed that in those example Erel uses Datatable. I digged a little bit and found out there's a new version, with some spicy things included (primarly I'm very interested in the search function).
I tried to implement the new Datatable, but I still get the "classic" one, without the marvellous search function...any tips?
2)
Also following the same example, I tried to implement the function that let you select a row and change its color, but without success.
I copied the css files (changing the table ID accordingly, of course).
Some code below
Two main questions for you
1)
Following the ServerExample by Erel I managed to fill a 3 column table with a HUGE query (about 1500 rows...).
I noticed that in those example Erel uses Datatable. I digged a little bit and found out there's a new version, with some spicy things included (primarly I'm very interested in the search function).
I tried to implement the new Datatable, but I still get the "classic" one, without the marvellous search function...any tips?
2)
Also following the same example, I tried to implement the function that let you select a row and change its color, but without success.
I copied the css files (changing the table ID accordingly, of course).
Some code below
Function that fills the table:
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 a = 0 To rs.ColumnCount - 1
Dim val As String = rs.GetString2(a)
row.Add(val)
Next
data.Add(row)
Loop
rs.Close
jq.RunMethod("dataTable", Array As Object(CreateMap("aaData": data, "bFilter": False, _
"bPaginate": True)))
'bind the selection changed event to the students table
ws.RunFunction("addSelectionToTable", Array As Object(tabella.Id, "TableView1_SelectedRowChanged"))
End Sub
Execution of the function:
FillTable(tabella, sql.ExecQuery("SELECT Cod, ListDesc, ListDescII FROM ANG_Prod"))
Important lines of the index.html:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
//connect to the web socket when the page is ready.
$( document ).ready(function() {
b4j_connect("/ws");
});
//add selection feature to DataTables: http://datatables.net/examples/api/select_single_row.html
/***************************************************/
function addSelectionToTable(id, eventName) {
$(id + " tbody").click(function(event) {
if (typeof event.target.parentNode._DT_RowIndex != 'undefined') {
setSelectedRow(id, event.target.parentNode._DT_RowIndex);
b4j_raiseEvent(eventName.toLowerCase(), {row : event.target.parentNode._DT_RowIndex});
}
});
}
function setSelectedRow(id, row) {
var oTable = $(id).dataTable( );
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
var aTrs = oTable.fnGetNodes();
$(aTrs[row]).addClass('row_selected');
}
function getSelectedRow(id) {
var aReturn = new Array();
var oTable = $(id).dataTable( );
var aTrs = oTable.fnGetNodes();
for ( var i=0 ; i<aTrs.length ; i++ )
{
if ( $(aTrs[i]).hasClass('row_selected') )
{
return i;
}
}
return -1;
}
/********** dataTable selection feature ******/</script>
<table id="tabella">
<thead>
<tr>
<th>Codice Articolo</th>
<th>Articolo</th>
<th>Vaso</th>
</tr>
</thead>
</table>